选择下一个元素轮播

我有一个DIV列表，我希望每隔X秒使用setTimeout来取下一个div并将显示屏设置为禁用，对于其他人，我该怎么做？有人可以给我一个例子吗？选择下一个元素轮播

我怎样才能使它成为无限的，当到达最后一个从第一个开始再次。

我知道这是一种旋转木马，但我也想看看它是如何完成的。

2011-12-22 Uffo

你需要在鼠标悬停时停止（暂停）？ – 2011-12-22 23:17:34

有很多方法可以做到这一点，但这里有一个方法：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中，避免使用任何全局变量或闭包变量来保持状态。

来源

2011-12-22 23:22:49 jfriend00

+1喜欢你的想法使用'.addClass（）'.removeClass（）' – danferth 2011-12-22 23:35:34

完美的功能，但没有理由继续重新选择元素。他们是已知数量。选择一次，然后使用选定的组进行所有操作。 – glortho 2011-12-23 03:19:46

这取决于。 OP没有说数据是否是100％静态的。此外，这种方法的优点是没有存储状态，只是使用类名来管理事情。国际海事组织，每个定时器几毫秒的额外执行没有任何区别，如果代码更简单。所以，我认为这是个人喜好，而不是正确或错误的做法。 – jfriend00 2011-12-23 03:53:35

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

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

来源

2011-12-22 23:18:42 glortho

如果你想重复'setTimeout'，''setInterval''应该是'setInterval'。 – Aaron 2011-12-22 23:20:49

哎呀，谢谢。修复。 – glortho 2011-12-22 23:21:19

非常感谢，但是当它改变时，它设置为不显示，但不显示下一个div – Uffo 2011-12-22 23:24:05

$("#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/

来源

2011-12-22 23:27:12 Variant

下面是与setTimeout实现：给定一个UL与 “清单” ID http://jsfiddle.net/imsky/EBpTw/

和LIS内：

$(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); 
});

来源

2011-12-22 23:27:36 imsky

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/

来源

2011-12-22 23:34:33 Aaron

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

来源

2011-12-22 23:37:45

选择下一个元素轮播

回答

相关问题