jquery：Jonathan Snook關於appendTo（）的「最簡單的幻燈片」問題

我見過的最小的幻燈片。jquery：Jonathan Snook關於appendTo（）的「最簡單的幻燈片」問題

$(function(){ 
    $('.fadein img:gt(0)').hide(); 
    setInterval(function(){ 
     $('.fadein :first-child').fadeOut() 
     .next('img').fadeIn() 
     .end().appendTo('.fadein');}, 
     3000); 
});

閱讀the page他解釋這個代碼小一點，臨近年底，他說

「結束（）重置jQuery的內部參考回到原來的選擇。這樣一來，它的：我將追加到.fadein元素的末尾，而不是下一個（'img'）的末尾的第一個孩子。

問：那麼如果在幻燈片放映結束，他追加到幻燈片一旦它通過所有的圖像循環結束的第一張幻燈片（:first-child），那麼哪裏第二滑片來自當幻燈片演示經歷了第二次迭代？我想我不明白如何將第一張幻燈片附加到幻燈片播放的結尾，其餘未添加。在顯示最後一張幻燈片後，它會將第一張幻燈片追加到最後，但這是最後一張幻燈片，因此The end() resets jQuery's internal reference back to the original selection. That way, it's the :first-child that I'm appending to the end of the .fadein element and not the next('img').就不算什麼，因爲我們只附加了第一張幻燈片（:first-child）。顯然它確實有用，所以有人可以幫助我理解或推薦一個來源來理解這一點？

編輯：另外，它不能跨軟件不是最好的東西？淡入新圖像不是更好，然後隱藏最後的圖像？出於某種原因，交叉淡入淡出並在某些瀏覽器中顯示白色背景？

來源

2011-06-26 android.nick

S/he繼續操作DOM，方法是始終選擇選擇器的第一個子元素並將其追加到最後。因此，如果在迭代中他/她將第一個孩子追加到最後，則在下一次迭代時，第一個孩子將是第一次迭代中的第二個孩子，等等......

例如，

第一次迭代

一個。 第一次迭代之前：

<img src="image1.jpg" /> 
<img src="image2.jpg" />

灣第一次迭代後：

<img src="image2.jpg" /> 
<img src="image1.jpg" />

第二次迭代

一個。 秒迭代前：

<img src="image2.jpg" /> 
<img src="image1.jpg" />

灣秒迭代後：

<img src="image1.jpg" /> 
<img src="image2.jpg" />

我認爲這是一個糟糕的方式去製作幻燈片。 DOM操作成本高昂，並造成很多麻煩。如果你可以改變選擇器，這將是更好的辦法。

來源

2011-06-26 09:29:34 Shef

啊！我懂了！「改變選擇器」是什麼意思？ –

@ android.nick：使用['。eq（index）']（http://api.jquery.com/eq-selector/）或['：nth-child（index）']（http://api.jquery.com/nth-child-selector /）來獲取下一個或上一個元素，而不是將第一個子元素移動到最後。 – Shef

jquery：Jonathan Snook關於appendTo（）的「最簡單的幻燈片」問題

回答

相關問題