JavaScript - изменение фона с помощью CSS Class и метода setInterval

Question

Я довольно новичок в JavaScript, и я хотел бы сделать автоматическое изменение фона с временными интервалами и изменениями класса CSS. На данный момент мой код не выполняет циклическое переключение двух фонов. Ребята, можете проверить, что с ним не так?

Спасибо!

$(document).ready(function() {

  var switcher = 0;

  var counter = setInterval(count, 2000);

  function count() {
    switcher = switcher + 1;
    if (switcher >= 2) {
      switcher = 0;
      return;
    };
  };


  switch (switcher) {

    case 0:
      $("#main-content").removeClass("background1");
      $("#main-content").addClass("background3");
      break;

    case 1:
      $("#main-content").removeClass("background3");
      $("#main-content").addClass("background1");
      break;


  };
});

Answer 1

Переехать switch() оператор в интервал обратного вызова функции. Удалить return также.

function count() {
    switcher = switcher + 1;
    if (switcher >= 2) {
      switcher = 0;
    };
    switch (switcher) {

        case 0:
          $("#main-content").removeClass("background1");
          $("#main-content").addClass("background3");
          break;

        case 1:
          $("#main-content").removeClass("background3");
          $("#main-content").addClass("background1");
          break;
    };

};

Answer 2

Почему бы вам не использовать toggleClass, он намного чище:

$(function () {
    var switcher = 0;
    var counter = setInterval(count, 2000);

    function count() {
        $("#main-content").toggleClass("background1 background3")
    };
});

Просто убедитесь, что вы назначаете класс по умолчанию для div:

<div id="main-content" class="background1">

</div>