我如何使用javascript在slider容器中的横幅中循环css类?

piv4azn7  于 2022-12-01  发布在  Java
关注(0)|答案(2)|浏览(97)

我有一个基本的滑块设置,有三个横幅。id是用来设置背景图像的。只有类为“active”的横幅显示在前端。
我想每8秒在“slider”div的元素中循环一次该类,这样我就可以在html中添加新的横幅,它们将在循环中轻松实现。
我最初的方法只有在滑块内有两个横幅处于活动状态时才有效。
第一个

wj8zmpe1

wj8zmpe11#

您需要跟踪当前幻灯片-请参见下面的代码(js中的注解)
第一个

m3eecexj

m3eecexj2#

我想这应该能如你所愿。
我们不需要循环遍历我们刚刚创建的横幅,索引变量,从它所在的横幅中删除活动类,然后将其分配给下一个横幅。

let currIndex = 0;
    setInterval(changebanner, 8000);
    
    function changebanner() {
       let banners = document.getElementsByClassName("banner");
       let activeBanner = document.getElementByClassName("active");
       activeBanner.classList.remove('active')
       if(currIndex >= banners.length){
           currIndex = 0;
       }
       banners[currIndex].classList.add('active')
       currIndex++;
    }

相关问题