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;
|