0

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

私は何を間違っていますか？

4

3 に答える 3

3

これでうまくいくはずです：

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

私がやっていることは、gimagesdiv の内容を変更する関数を定義し、setInterval 関数のおかげで 2 秒ごとに呼び出すだけです。初心に戻るコツはlist[j%list.length].

于 2012-12-21T14:10:37.253 に答える
1

タイマーをループ内に移動します-次の項目に移動して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);
    });
});
于 2012-12-21T13:53:07.777 に答える
0

あなたの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();
    });
于 2012-12-21T15:02:26.987 に答える