Question

我有部分代码

<div class="container">
    <div class="item active">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

我需要在一些延迟和从最后一个元素到第一个元素的循环切换之后将活动类切换到下一个元素。我怎么能这样做？

Answer 1

您需要使用setInterval(）方法。循环项目使用项目数量模数的加法。运行下面的代码段以查看结果。

var navs = $(".container > .item");
setInterval(function(){
  var cur = $(".container > .active").index();
  var nxt = (cur + 1) % navs.length;
  navs.eq(cur).removeClass("active");
  navs.eq(nxt).addClass("active");
}, 1000);

.item {
  display: inline-block;
  height: 100px;
  width: 100px;
  background-color: green;
}
.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="item active">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

在循环jquery中切换活动div类

1 个答案: