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

循环通过特定的div

3 个答案: