3

我见过的最小的幻灯片。 

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

阅读他解释这一小段代码的页面，接近尾声时他说

“end() 将 jQuery 的内部引用重置为原始选择。这样，我添加到 .fadein 元素末尾的是 :first-child 而不是 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)。显然它确实有效，所以有人可以帮助我理解或推荐一个来源来理解这一点吗？

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

4

1 回答 1

2

他/她通过始终获取选择器的第一个子元素并将其附加到末尾来不断地操纵 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-26T09:29:34.773 回答