选择下一个元素轮播

Select next element carousel

本文关键字：元素 下一个 选择      更新时间：2023-09-26

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

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

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

有很多

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

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

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

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

这是一个带有 setTimeout 的实现： http://jsfiddle.net/imsky/EBpTw/

给定一个 ID 为"列表"且内部为 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);
});

DIV 循环演示 

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

网页示例：

  <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;
  }

这是一个鼠标悬停暂停：

带有鼠标悬停暂停的演示

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/

相关文章：