Question

我见过的最小幻灯片。

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

阅读the page，他解释了这一小段代码，接近最后他说

“end（）重置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）。显然它确实有效，所以有人可以帮助我理解或推荐一个消息来源来理解这个吗？

编辑：另外，难道不能交叉淡化不是最好的事情吗？淡入新图像，然后隐藏最后一张图像不是更好吗？由于某种原因，交叉消失了，并在某些浏览器中显示白色背景？

Answer 1

他/她总是通过选择选择器的第一个子元素并将其追加到最后来继续操作DOM。因此，如果在迭代时，他/她将第一个孩子附加到结尾，在下一次迭代中，第一个孩子将是第一个孩子在第一次迭代中的第二个孩子，依此类推...

E.g。

首次迭代

一个。 在第一次迭代之前：

<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操作成本高昂并且会产生很多麻烦。如果您可以更改选择器，这将是更好的方法。

jquery：Jonathan Snook关于appendTo（）的“最简单的幻灯片”问题

1 个答案: