Как перебирать элементы массивоподобных объектов по кругу с задержкой:
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, а для второй вызвать его.
