如何使用 javascript 在滑块容器中循环 css 类 truth 横幅？答案

【问题标题】：How do I cycle a css class trouth banners in a slider container with javascript?如何使用 javascript 在滑块容器中循环 css 类 truth 横幅？
【发布时间】：2022-11-28 20:46:40
【问题描述】：

我有一个基本的滑块设置，里面有三个横幅。 id 用于设置背景图像。前端仅显示类别为“活动”的横幅。我想每 8 秒在“滑块”div 的元素内循环该类，这样我就可以在 html 中添加新横幅，它们将在循环中轻松实现。

<div class="slider">
    <div class="banner active" id="sky"></div>
    <div class="banner" id="outdoor"></div>
    <div class="banner" id="photo"></div>
</div>

我的初始方法仅在滑块中有两个横幅处于活动状态时才有效。

setInterval(changebanner, 8000);

function changebanner() {
    document.getElementsByClassName("banner").classList.toggle("active");
}

【问题讨论】：

标签： javascript html css class cycle

【解决方案1】：

您需要跟踪当前幻灯片 - 请参阅下面的代码（js 中的 cmets）

const banners = document.getElementsByClassName("banner"); // get banners
let currentActive = 0;  // set the current active slide index
setInterval(changebanner, 2000); // have changed to 2000 for demo so you don't have to wait 8 seconds

function changebanner() {
  banners[currentActive].classList.remove("active"); // remove class from current active banner

  currentActive++; // increment active slide

  if (currentActive === banners.length) {
    currentActive = 0; // reset active to 0 if last banner is active
  }

  banners[currentActive].classList.add("active"); // add active to next slide
}

.active {
  color: red;
}

<div class="slider">
  <div class="banner active" id="sky">1</div>
  <div class="banner" id="outdoor">2</div>
  <div class="banner" id="photo">3</div>
</div>

【讨论】：

【解决方案2】：

我认为这应该可以按您的意愿工作。

在那里我们不需要遍历我们刚刚制作的横幅和索引变量，从它所在的任何横幅中删除活动类，然后将其分配给下一个横幅。


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

【讨论】：