JQuery的setTimeout不工作在一個循環

我想要做的是創建一個快速和骯髒的幻燈片放映。我的想法是，我有主div包含一個空白的「主」img標籤和一組div，每個包含它自己的img和span標籤。每個圖像的來源又被設置爲主圖像的來源。所以我已經開始迭代每個圖像，並嘗試使用setTimeout（）和2秒延遲來設置它源於主img的源。我遇到的問題是，代碼似乎等待兩秒鐘，只顯示序列中的最後一個圖像。JQuery的setTimeout不工作在一個循環

$(document).ready(function() { 
    $('div#slideshow').children('div.slideshowsourceimage').each(function() { 
     var src = $(this).children('img').attr('src'); 
     var desc = $(this).children('span').text(); 

     setTimeout(function() { 
      $('img#slideshowimage').attr('src', src); 
     }, 2000); 
    }); 
});

如果我能得到一個第二雙眼睛幫我找出我在做什麼錯了，我會感激它。

感謝，

來源

2012-07-18 Andy Evans

這可能是因爲你已經覆蓋'src'多次，通過孩子們迭代...或者類似的東西。由超時看到的'src'屬性不是你想要的。 – 2012-07-18 19:09:05

是我會做這樣的事情：

$(function() { 
    var $images = $('#slideshow div.slideshowsourceimage'); 
    var x = 0; 
    setInterval(function() { 
     if(x == $images.length) { // start over if we get to the last one 
      x = 0; 
     } 

     var $cur = $images.eq(x); 
     var src = $cur.find('img').attr('src'); 
     var desc = $cur.find('span').text(); 

     $('#slideshowimage').attr('src', src); 
     x++; 
    }, 2000); 
});

來源

2012-07-18 19:16:07

您需要使用的setInterval或增加的每個圖像顯示的秒數。現在發生的事情是，所有事情都在兩秒鐘內完成，因此只有最後一張圖片顯示。像

$(document).ready(function() { 
    var time=0; 
    $('div#slideshow').children('div.slideshowsourceimage').each(function() { 
     var src = $(this).children('img').attr('src'); 
     var desc = $(this).children('span').text(); 

     setTimeout(function() { 
      $('img#slideshowimage').attr('src', src); 
      time+=2000; 
     }, time); 
    }); 
});

來源

2012-07-18 19:09:38 qw3n

JQuery的setTimeout不工作在一個循環

回答

相關問題