jQuery Slide-Show Questions

Question

我幾個星期前在寫一個使用jQuery的幻燈片，並對我的實現感到疑惑。我寫了幻燈片來連續淡入淡出圖像，但是我編程它的方式，函數遞歸永遠不會停止。我想知道是否有更好的方法來做到這一點。當我在幻燈片放映過程中檢查圖像時，在我的div標籤中沒有任何內容，但是在這裏可能會發生一些我不知道的不好的事情。 這裏是我的代碼：

 var arr = new Array(3); 
     arr[0] = 'http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg'; 
     arr[1] = 'http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg'; 
     arr[2] = 'http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg'; 
     runSlide(0); 
     //The main function that runs the slide show recursively 
     function runSlide(t) 
     { 
      $('<img src="' + arr[t] + '" class="pic" id="photo' + t + '">').appendTo('#slide').hide(); 
      $('#photo' + t).fadeIn(300).delay(7000).fadeOut(500, function() { 
       if(t == (arr.length - 1)) { 
        t = 0; 
       } else { 
        t++; 
       } 
       $('.pic').remove(); 
       runSlide(t); 
      }); 
     } 
     <div id="slide"></div> 

感謝科學

Answer 1

您可以在html中創建圖像元素並切換出源。這將減少對DOM的操縱。

var arr = new Array(3); 
     arr[0] = 'http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg'; 
     arr[1] = 'http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg'; 
     arr[2] = 'http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg'; 

     //The main function that runs the slide show recursively 

var $img = $('#img'); 

runSlide(0); 
     //The main function that runs the slide show recursively 
     function runSlide(t) 
     { 
      $img.attr('src',arr[t]).fadeIn(300).delay(7000).fadeOut(500, function() { 
       if(t == (arr.length - 1)) { 
        t = 0; 
       } else { 
        t++; 
       } 
       $('.pic').remove(); 
       runSlide(t); 
      }); 
     } 

Answer 2

它的罰款。運行.remove（）時，它會完全從DOM中移除幻燈片。他們不會在您的HTML中堆疊或建立。

從文檔：

使用一個.remove（）時，你要刪除的元素本身，以及 裏面的一切它。除了元素本身之外，綁定事件和與元素相關的jQuery數據的所有 都將被刪除。