我有一个基本的滑块设置,有三个横幅。id是用来设置背景图像的。只有类为“active”的横幅显示在前端。我想每8秒在“slider”div的元素中循环一次该类,这样我就可以在html中添加新的横幅,它们将在循环中轻松实现。我最初的方法只有在滑块内有两个横幅处于活动状态时才有效。第一个
wj8zmpe11#
您需要跟踪当前幻灯片-请参见下面的代码(js中的注解)第一个
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++; }
2条答案
按热度按时间wj8zmpe11#
您需要跟踪当前幻灯片-请参见下面的代码(js中的注解)
第一个
m3eecexj2#
我想这应该能如你所愿。
我们不需要循环遍历我们刚刚创建的横幅,索引变量,从它所在的横幅中删除活动类,然后将其分配给下一个横幅。