jQuery的每時間循環

我試圖建立一系列嵌套定時循環。內循環遍歷6個具有相同CSS類的項目，並將圖像換出4秒鐘。外部循環導致內部循環連續重複。因此，image1互換，image2互換...... image6互換，image1互換，image2互換......每個div中有兩個圖像，一個是「熱門」類，另一個是「冷」類。在開始時，「熱」圖像被隱藏。jQuery的每時間循環

下面的代碼交換所有圖像一次24秒，然後似乎並沒有做任何事情。

 var innertime = 4000; //highlight effect time in ms 
     var outertime = innertime * 6; 
     setInterval(function() { 
      $.each($('.eachsponsor'), function(){ 
       $(this).find('img.cold').css("display","none"); 
       $(this).find('img.hot').css("display", "block"); 
       setTimeout(function(){ 
        $(this).find('img.hot').css("display","none"); 
        $(this).find('img.cold').css("display", "block"); 
       }, innertime); 
      }); 
     }, outertime);

如果有人有，爲什麼這不起作用任何指針，我確實很感激。

來源

2013-11-24 L_Holcombe

所有的setTimeouts同時啓動，因此它們都在同一時間完成。根據循環的當前索引修改您的持續時間，以使每個持續時間比先前的更長。的 –

可能重複[我如何在JavaScript循環中增加延遲？]（http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop） –

您的問題是：this的setTimeout內是全球性的。嘗試使用結合.bind

setTimeout(function(){ 
      $(this).find('img.hot').css("display","none"); 
      $(this).find('img.cold').css("display", "block"); 
     }.bind(this),innertime);

的背景之下，我覺得你的代碼還是你想要什麼沒有做，我認爲你需要這樣的：

var innertime = 4000; 
var eachsponsor = $('.eachsponsor'); 
$.each(eachsponsor, function(){ 
     $(this).find('img.cold').hide(); 
     $(this).find('img.hot').show(); 
}); 

var currentIndex = 0; 
setInterval(function(){ 
     var currentDiv = eachsponsor.eq(currentIndex); 
     currentDiv.find('img.hot').toggle(); 
     currentDiv.find('img.cold').toggle(); 

     currentIndex = (currentIndex+1) % eachsponsor.length; 
}, innertime);

更新時間：

var innertime = 4000; 
    var eachsponsor = $('.eachsponsor'); 
    $.each(eachsponsor, function(){ 
      $(this).find('img.cold').hide(); 
      $(this).find('img.hot').show(); 
    }); 

    var currentIndex = 0; 

    function slideNext(){ 
      var currentDiv = eachsponsor.eq(currentIndex); 

      currentDiv.find('img.cold').hide(); 
      currentDiv.find('img.hot').show(); 

      setTimeout(function(){ 
       currentDiv.find('img.hot').toggle(); 
       currentDiv.find('img.cold').toggle(); 
       currentIndex = (currentIndex+1) % eachsponsor.length; 
       slideNext(); 
      },innertime); 
    } 

    slideNext();

來源

2013-11-24 04:53:06

這非常接近我所需要的。但切換序列需要在每次迭代中發生兩次。應該冷靜，熱身，然後四秒鐘後，熱身和冷開。 –

@L_Holcombe：檢查更新的答案，看看這是你需要的。 –

您的原始代碼將我引向解決方案。非常感謝。 –

這個變量，裏面的setTimeout函數，沒有這個參考。這樣做以下

 
setInterval(function() { 
      $.each($('.eachsponsor'), function(){ 
       var that = this; 
       $(this).find('img.cold').css("display","none"); 
       $(this).find('img.hot').css("display", "block"); 
       setTimeout(function(){ 
        $(that).find('img.hot').css("display","none"); 
        $(that).find('img.cold').css("display", "block"); 
       }, innertime); 
      }); 
     }, outertime);

來源

2013-11-24 04:11:26

jQuery的每時間循環

回答

相關問題