Web-programming_Petrushin_E.A._PIbd-22/Lab3/PrBookfill/js/banner.js

// модуль для смены изображения в баннере по таймеру

import '../css/banner.css';

// указывается блок, в котором будет баннер
// блок должен содержать изображения
// eslint-disable-next-line require-jsdoc
function myBanner(root) {
  console.info('Loaded');

  // получение всех изображений внутри баннера
  const banners = document.querySelectorAll(`${root} img`);

  // всем изображениям устанавливается класс banner-hide
  // если были другие классы, то они будут удалены
  for (let i = 0; i < banners.length; i += 1) {
    banners[i].setAttribute('class', 'banner-hide');
  }

  let old = banners.length - 3;
  let current = 0;
  let current2 = 1;
  let current3 = 2;

  // функция меняет изображения в цикле
  // изображение с классом banner-show будет показано
  // изображение с классом banner-hide будет скрыто
  // функция запускает таймер, который через 5 секунд
  // запускает функцию, снова создается таймер и т. д.
  // eslint-disable-next-line require-jsdoc
  function loop() {
    banners[current].setAttribute('class', 'banner-show');
    banners[current2].setAttribute('class', 'banner-show');
    banners[current3].setAttribute('class', 'banner-show');
    banners[old].setAttribute('class', 'banner-hide');

    // eslint-disable-next-line quotes
    console.info("Banner changed");

    old = current;
    current = current2;
    current2 = current3;
    current3 += 1;

    if (current + 2 === banners.length) {
      current = 0;
      current2 = 1;
      current3 = 2;
      banners[old].setAttribute('class', 'banner-hide');
      banners[old + 1].setAttribute('class', 'banner-hide');
      banners[old + 2].setAttribute('class', 'banner-hide');
      banners[current].setAttribute('class', 'banner-show');
      banners[current + 1].setAttribute('class', 'banner-show');
      banners[current + 2].setAttribute('class', 'banner-show');
    }

    setTimeout(loop, 5000);
  }

  loop();
}

export default myBanner;