jquery:Jonathan Snook 的 "simplest slideshow"关于appendTo() 的问题

Question

我见过的最小的幻灯片。

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

阅读the page他在其中解释了这一小段代码，在接近尾声时他说

"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 ) 附加到幻灯片放映的末尾，一旦循环播放完所有图像，那么当幻灯片放映时，第二张幻灯片来自哪里经历第二次迭代？我想我不明白当其余幻灯片未附加时，将第一张幻灯片附加到幻灯片末尾是如何工作的。显示最后一张幻灯片后，它将第一张幻灯片附加到末尾，但这就是最后一张幻灯片，因此 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 )。显然它确实有效，所以有人可以帮助我理解或推荐一个来源来理解这一点吗？

编辑:另外，交叉淡入淡出难道不是最好的事情吗？淡入新图像，然后隐藏最后一个图像不是更好吗？由于某种原因，交叉淡入淡出会困惑并在某些浏览器中显示白色背景吗？

Answer 1

她/他通过始终获取选择器的第一个子元素并将其附加到末尾来不断操作 DOM。因此，如果在一次迭代中，他/她将第一个子级附加到末尾，则在下一次迭代中，第一个子级将是第一次迭代中的第二个子级，依此类推...

例如

第一次迭代

a. 第一次迭代之前:

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

b. 第一次迭代后:

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

第二次迭代

a. 第二次迭代之前:

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

b. 第二次迭代后:

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

我认为这是制作幻灯片的糟糕方法。 DOM 操作成本高昂并且会带来很多麻烦。如果您可以更改选择器，那就更好了，这将是最好的方法。