47 lines
1.6 KiB
JavaScript
47 lines
1.6 KiB
JavaScript
|
// модуль для смены изображения в баннере по таймеру
|
|||
|
|
|
|||
|
|
import "../css/banner.css";
|
|||
|
|
|
|||
|
|
// указывается блок, в котором будет баннер
|
|||
|
|
// блок должен содержать изображения
|
|||
|
|
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 - 1;
|
|||
|
|
let current = 0;
|
|||
|
|
|
|||
|
|
// функция меняет изображения в цикле
|
|||
|
|
// изображение с классом banner-show будет показано
|
|||
|
|
// изображение с классом banner-hide будет скрыто
|
|||
|
|
// функция запускает таймер, который через 5 секунд
|
|||
|
|
// запускает функцию, снова создается таймер и т. д.
|
|||
|
|
function loop() {
|
|||
|
|
banners[current].setAttribute("class", "banner-show");
|
|||
|
|
banners[old].setAttribute("class", "banner-hide");
|
|||
|
|
|
|||
|
|
console.info("Banner changed");
|
|||
|
|
|
|||
|
|
old = current;
|
|||
|
|
current += 1;
|
|||
|
|
|
|||
|
|
if (current === banners.length) {
|
|||
|
|
current = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setTimeout(loop, 5000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loop();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default myBanner;
|