javascript - 选择下一个元素轮播

Question

我有一个 DIV 列表，我希望每隔 X 秒使用 setTimeout 获取下一个 div 并将显示设置为阻塞，而对于其他的则不显示，我该怎么做？有人可以给我举个例子吗？

如何让它变得无限，当到达最后一个时又从第一个开始。

我知道这是一种轮播，但我也想看看它是如何完成的。

Answer 1

有很多方法可以做到这一点，但这里有一种方法:http://jsfiddle.net/jfriend00/Yr3NV/

HTML:

<div id="container">
    <div class="item active">1111</div>
    <div class="item">2222</div>
    <div class="item">3333</div>
    <div class="item">4444</div>
    <div class="item">5555</div>
    <div class="item">6666</div>
    <div class="item">7777</div>
</div>

代码:

setInterval(function() {
    var next = $("#container .active").removeClass("active").next();
    if (next.length == 0) {
        next = $("#container .item:first");
    }
    next.addClass("active");
}, 1000);

CSS:

.item {display: none;}
.item.active {display: block;}

使用添加/删除类的方法可以让您通过 CSS 进行更多的样式控制，而不是将样式编码到您的 javascript 中，并且避免使用任何全局变量或闭包变量来保持状态。