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中，并避免使用任何全局或闭包变量来保持状态。

Answer 2

var divs = $('#container').find('div'),
    index = 0;

setInterval(function() {
    if (!divs[index]) index = 0;
    divs.hide();
    divs[index++].style.display = 'block';
}, 1000); // fires every 1 second

关于全球范围的所有通常的免责声明都是一个坏主意，但这应该给你你想要的东西。

Answer 3

$("#list div").hide();
var current = $("#list div").first().show();
setInterval(function() {
     current.hide();
    current = current.next().length > 0  ? current.next() : $("#list div").first();
    current.show();

},2000);



<div id="list">
<div>1</div>
<div>22</div>
<div>333</div>
<div>4444</div>
</div>

可以看到在这里工作：

http://jsfiddle.net/KenwV/

Answer 4

以下是setTimeout的实施：http://jsfiddle.net/imsky/EBpTw/

给定ID为“list”且内部为LI的UL：

$(function() {
    $("#list li:gt(0)").hide();

    function showNextBlock() {
        var currentBlock = $("#list li:visible");
        if (currentBlock.index() == $("#list li").length - 1) {
            currentBlock.hide().parent().find("li:first").show()
        }
        else {
            currentBlock.hide().next("li").show();
        }
        setTimeout(showNextBlock,1000);
    }

    setTimeout(showNextBlock,1000);
});

Answer 5

function cycleDivs(base)
{
    var next = ($(base).next('div').css('display') == 'none')? $(base).next('div') : $('div:first');
    $(base).hide();
    $(next).show();
    window.setTimeout(function(){cycleDivs(next);}, 1000)
}
window.setTimeout(function(){cycleDivs($('div:first'));}, 1000);

以下是一个有效的例子：http://jsfiddle.net/8hfBd/

Answer 6

<强> DIV LOOP DEMO

var i=0, len=$('#parent div').length;
(function loop(){
  $('#parent div').eq(i++%len).fadeTo(700,1).siblings().fadeTo(700,0,loop);
})();

HTML示例：

  <div id="parent">
    <div class="children ch1">I'm DIV 1</div>
    <div class="children ch2">I'm DIV 2</div>
    <div class="children ch3">I'm DIV 3</div>
    <div class="children ch4">I'm DIV 4</div>
  </div>

CSS基本设置：

  .children{
    position:absolute;
  }

这是一个鼠标悬停暂停：

<强> DEMO with mouseover pause

选择下一个元素轮播

6 个答案: