46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
// модуль для смены изображения в баннере по таймеру
|
||
|
||
import "./banner.css";
|
||
|
||
// указывается блок, в котором будет баннер
|
||
// блок должен содержать изображения
|
||
function myBanner(root) {
|
||
console.info("Loaded");
|
||
|
||
const banners = document.querySelectorAll("#banner > a > img"); //a > img.button-sm
|
||
|
||
|
||
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 button-sm m-2 img-fluid ");
|
||
banners[old].setAttribute("class", "banner-hide m-2");
|
||
|
||
console.info("Banner changed");
|
||
|
||
old = current;
|
||
current += 1;
|
||
|
||
if (current === banners.length) {
|
||
current = 0;
|
||
}
|
||
|
||
setTimeout(loop, 5000);
|
||
}
|
||
|
||
loop();
|
||
}
|
||
|
||
export default myBanner;
|