在循环 jQuery 中切换活动的 div 类

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>