64 lines
2.3 KiB
JavaScript
64 lines
2.3 KiB
JavaScript
// модуль для смены изображения в баннере по таймеру
|
||
|
||
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;
|