循环遍历特定的 div

Question

我正在尝试创建一个无限循环，通过 div 并在其他 div 中显示图像和一些描述文本，所以基本上它是一个画廊。

<div class="gallery">
    <div class="header">gallery</div>
    <div class="gimages"></div>
    <div class="ggallery">
        <div class="gitem" id="0"><div class="imgtext"><div>text</div></div><img src="images/gallery/1.jpg" border="0" /></div>
        <div class="gitem" id="1"><div class="imgtext"><div>text</div></div><img src="images/gallery/2.jpg" border="0" /></div>
        <div class="gitem" id="2"><div class="imgtext"><div>text</div></div><img src="images/gallery/3.jpg" border="0" /></div>
        <div class="gitem" id="3"><div class="imgtext"><div>text</div></div><img src="images/gallery/4.jpg" border="0" /></div>
        <div class="gitem" id="4"><div class="imgtext"><div>text</div></div><img src="images/gallery/5.jpg" border="0" /></div>
        <div class="gitem" id="5"><div class="imgtext"><div>text</div></div><img src="images/gallery/6.jpg" border="0" /></div>
        <div class="gitem" id="6"><div class="imgtext"><div>text</div></div><img src="images/gallery/7.jpg" border="0" /></div>
        <div class="gitem" id="7"><div class="imgtext"><div>text</div></div><img src="images/gallery/8.jpg" border="0" /></div>
        <div class="gitem" id="8"><div class="imgtext"><div>text</div></div><img src="images/gallery/9.jpg" border="0" /></div>
        <div class="gitem" id="9"><div class="imgtext"><div>text</div></div><img src="images/gallery/10.jpg" border="0" /></div>
        <div class="gitem" id="10"><div class="imgtext"><div>text</div></div><img src="images/gallery/11.jpg" border="0" /></div>
        <div class="gitem" id="11"><div class="imgtext"><div>text</div></div><img src="images/gallery/12.jpg" border="0" /></div>
    </div>
</div>

div ggallery 是 display:none，我从这里获取数据以放置在 div gimages 中。 问题是它只会显示最后一张图像，除非我在每次迭代之间发出警报。这是脚本：

$(document).ready(function(){
    var refreshId = setInterval( function(){
        $('.gallery .ggallery .gitem').each(function(index){
            $('.gallery .gimages').html($(this).html());
            if(index==11){
                index = 0;
            }
        });
    }, 5000);
});

我做错了什么？

Answer 1

这应该可以解决问题：

$(document).ready(function(){
   var list = $('.gallery .ggallery .gitem');
   var j = 0;
   var f = function() {
       $('.gallery .gimages').html($(list[j%list.length]).html());
       j++;
   };        
   setInterval(f, 2000);
});​

查看完整的小提琴：http://jsfiddle.net/kokoklems/nQGw9/

我所做的只是定义一个函数来改变你gimages div 的内容，然后通过 setInterval 函数每 2 秒调用一次。回到开头的诀窍是使用list[j%list.length]。

Answer 2

将您的计时器移到循环内 - 您每 5 秒运行一次循环并到达终点，而不是转到下一个项目并等待 5 秒（未经测试）

$(document).ready(function(){
    $('.gallery .ggallery .gitem').each(function(index){
        var refreshId = setInterval( function(){
            $('.gallery .gimages').html($(this).html());
            if(index==11){
                index = 0;
            }
        }, 5000);
    });
});

Answer 3

根据您的 html，以下是代码。您也可以更改间隔。

function init(){
        var itemInterval = 1000;
        var numberOfItems = $('.gitem').length;
        var currentItem = 0;
        setInterval(function () {
            $(".gimages").html($('#' + currentItem).clone());
            if (currentItem == numberOfItems - 1) {
                currentItem = 0;
            } else {
                currentItem++;
            }

        }, itemInterval);
    };

    $(function () {
        init();
    });