3

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

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

彼がこの小さなコードを説明しているページを読んで、最後の方で彼は言います

「end（）はjQueryの内部参照を元の選択にリセットします。そうすれば、next（'img'）ではなく.fadein要素の最後に追加するのは：first-childです。」

質問：スライドショー:first-childの最後に、すべての画像を循環させた後、最初のスライド（）をスライドショーの最後に追加する場合、スライドショーが2回目の反復を通過するときに、2番目のスライドはどこから取得されますか？スライドショーの最後に最初のスライドを追加すると、残りのスライドが追加されない場合にどのように機能するのか理解できないと思います。最後のスライドが表示された後、最初のスライドを最後に追加しますが、それが最後のスライドです。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。明らかにそれは機能するので、誰かが私がこれを理解するのを手伝ったり、これを理解するための情報源を推薦したりできますか？

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

4

1 に答える 1

2

S /彼は、セレクターの最初の子要素を常に取得し、それを最後に追加することによって、DOMを操作し続けます。したがって、反復で1人が最初の子を最後に追加した場合、次の反復で最初の子は最初の反復で2番目の子になります。

例えば

最初の反復

a。最初の反復の前：

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

b。最初の反復後：

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

2回目の反復

a。2回目の反復前：

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

b。2回目の反復後：

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

これはスライドショーを作るのに悪い方法だと思います。DOMの操作にはコストがかかり、多くの問題が発生します。セレクターを変更できれば、それが最善の方法です。

于 2011-06-26T09:29:34.773 に答える