通過特定的div進行循環

我試圖做一個無限循環，通過divs並在其他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顯示：無，我從這裏得到的數據放在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); 
});

我在做什麼錯？

來源

2012-12-21 JustaN00b

這應該這樣的伎倆：

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

什麼我做的是簡單地定義是改變你內容的功能div，然後通過setInterval函數每2秒調用一次。回到開始的技巧是使用list[j%list.length]。

來源

2012-12-21 14:10:37

移動你的計時器循環裏面 - 你運行你的循環每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-21 13:53:07

感謝您的幫助傑伊和克萊門特，它現在工作正常。 – JustaN00b

根據你的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-21 15:02:26 Rahul

通過特定的div進行循環

回答

相關問題