jquery：Jonathan SnookのappendTo（）についての最も単純なスライドショー

Question

私が今まで見た中で最も小さなスライドショー。

彼は「終わりは（）元 選択にjQueryの内部 リファレンスをリセットします。そうすれば、それはだ

を言う終わり近く、コードのこの小さなビットを説明しthe pageを読む

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

： 末尾に.fadein要素の末尾に「 」（「img」）が追加されていない最初の子。

QUESTION：だから、スライドショーの最後であれば、それはすべての画像を循環だ後、彼はスライドショーの終わりまでに最初のスライド（:first-child）を追加し、その後、第2のスライドはときから来るんスライドショーは2回目の繰り返しです私は、残りの部分が追加されていないときに、スライドショーの最後に最初のスライドを追加する方法を理解していないと思います。最後のスライドが表示された後、最初のスライドが最後に追加されますが、それが最後のスライドです。最初のスライド（: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').は何もありません。明らかにそれはうまくいくので、誰かが私にこのことを理解するための情報源を理解したり推薦したりするのを助けることができますか？

編集：また、最高のものではないクロスフェードできませんでしたか？新しい画像をフェードインしてから、最後の画像を隠す方が良いでしょうか？クロスフェードが混乱して何らかの理由でブラウザに白い背景が表示される可能性がありますか？

Answer 1

セレクタの最初の子要素を常に取り、最後に追加することでDOMを操作し続けます。したがって、反復処理で最初の子を最後に追加した場合、次の反復で最初の子は最初の反復で2番目の子となります。

などのE.g.

最初の繰り返し。最初の反復の前：

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

B。最初の反復後：

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

2回目の反復

。 2回目の反復の前：

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

B。 は、第二の反復の後：

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

私は、これはスライドショーを作るについて行くには悪い方法だと思います。 DOM操作はコストがかかり、多くの問題を引き起こします。セレクタを変更することができれば、それを実行する最善の方法になると良いでしょう。