Как каждые несколько секунд убирать класс у одного блока и добавлять другому с таким же классом?

Question

[godsplan]

Пример разметки.

<div class="banner-block  active">
          <img class='banner-img' src="/images/f-b-bg.png" alt="">
        </div>
        <div class="banner-block">
          <img class='banner-img' src="/images/s-b-bg.png" alt="">
        </div>
        <div class="banner-block">
          <img class='banner-img' src="/images/t-b-bg.png" alt="">
        </div>

Каждые несколько секунд убирать класс актив у одного блока и добавлять следующему.Как это сделать?
Начал так:

let i = document.querySelectorAll('.banner-block');
    i.forEach(function () {
      setTimeout(() => {

      }, 2000);
    })

Answer 1

[0xD34F]

Как перебирать элементы массивоподобных объектов по кругу с задержкой:

function interval(arr, delay, callback) {
  let i = ~-arr.length;

  return arr.length
    ? setInterval(() => callback(arr[i], arr[i = -~i % arr.length]), delay)
    : null;
}

// или

function interval(arr, delay, callback) {
  let timeoutId = null;

  arr.length && (function step(i) {
    timeoutId = setTimeout(() => {
      callback(arr[i++], arr[i %= arr.length]);
      step(i);
    }, delay);
  })(arr.length - 1);

  return () => clearTimeout(timeoutId);
}

Перебираем элементы, удаляем/добавляем класс:

interval(
  document.querySelectorAll('.banner-block'),
  300,
  (prev, curr) => {
    prev.classList.remove('active');
    curr.classList.add('active');
  }
);

Если понадобится остановить переключение класса, то надо предварительно сохранить результат выполнения функции interval, для первой версии передавать этот результат в clearInterval, а для второй вызвать его.

Comments

[godsplan]

Спасибо, большое.