需要解释关于幻灯片放映的jquery代码吗

div很少有图像，下面的代码一次显示一个图像。这就像幻灯片放映一样。我读了代码，但不明白它是如何工作的。代码已经过测试，正在运行。只有一个问题是动画有时运行得很快。我只是不明白代码中的错误是什么，因为有时图像在幻灯片放映中变化非常快

下面是html和jquery代码

$（文档）.ready（函数（）{
$（'.headerCarouselwrapper img:gt（0）'）.hide（）；
setInterval（函数（）{
$（'.headerCarouselwrapper:first child'）.fadeOut（）
.next（'img'）.fadeIn（）
.end（）.appendTo（'.headerCarouselwrapper'）；
}, 5000);
});

我需要知道两件事

1） 这段代码是如何工作的。如果可能的话，请告诉我每个like是如何工作的

2） 为什么有时幻灯片放映动画运行得很快

---

谢谢

它的功能

$（document）.ready

-将事件处理程序绑定到

ready

事件，该事件在DOM准备好进行操作时触发。看

$（'.headerCarouselwrapper img:gt（0））.hide（）

-隐藏与选择器匹配的所有元素。在本例中，它选择所有图像（第一个图像除外），这些图像是类为“headerCarouselwrapper”的元素的后代。见和

setInterval

-以给定的间隔重复某些内容。本例中给出的间隔为5000ms（5秒）。作为第一个参数传递的匿名函数是重复的。请参见MDN上的

$（'.headerCarouselwrapper:first child'）.fadeOut（）

-使用类“headerCarouselwrapper”淡出每个元素的第一个子元素。看到和

.next（'img'）.fadeIn（）

-淡入紧跟其后的同级元素（如果它是

img

元素）。见和

.end（）

-将当前选定的元素从同级元素返回到原始元素

：第一个子元素

。看

.appendTo（'.headerCarouselwrapper'）

-将当前选定的元素附加到具有“headerCarouselwrapper”类的任何元素。看

通过查看jQuery文档，您可以自己解决大部分问题

我猜奇怪的计时问题与fadeIn（）和fadeOut（）有关。它们都设置了自己的超时循环，因此这可能会干扰主间隔的执行

代码包装在“就绪”处理程序中。加载DOM后，将执行绑定到“ready”事件的匿名函数（“load”事件在加载页面中的所有资产时触发-html、图像、js、css…）

隐藏除第一个图像外的所有图像：

$('.headerCarouselwrapper img:gt(0)').hide();

伪选择器允许匹配索引大于指定索引的元素

.headerCarouselwrapper img

查找容器中的所有图像，并且

：gt（0）

过滤器将包含除第一个图像之外的所有图像

每5秒执行一个函数：

setInterval(function () {
    // executes every 5000 milliseconds
}, 5000);

在每5秒执行一次的匿名函数中，takahe使用类

.headerCarouselwrapper

（基本上是可见图像）作为容器的第一个子级并淡入，使用.next（）获取下一个图像并淡入。将淡出到容器中的图像附加到容器中：

// get first child in ".headerCarouselwrapper" which is the currently
// visible image and fade it out
$('.headerCarouselwrapper :first-child').fadeOut()
// get the next <IMG> and fade it in
.next('img').fadeIn()
// get back the image that was faded out
// and append it (move it) at the end of the container
// so the slideshow cycle
.end().appendTo('.headerCarouselwrapper');

//获取“.headerCarouselwrapper”中的第一个子项，它是当前
//可见图像并将其淡出
$（'.headerCarouselwrapper:first child'）.fadeOut（）
//获取下一个并淡入
.next（'img'）.fadeIn（）
//找回淡出的图像
//并将其附加（移动）到容器的末尾
//那么幻灯片放映周期呢
.end（）.appendTo（'.headerCarouselwrapper'）；

---

关于快速动画的问题

正如您在评论中所说的，您正在使用jquery 1.6.2

jQuery 1.6引入了对API

requestAnimationFrame

的支持（FF和Chrome支持，但我认为IE不支持）。它暴露出问题：

不再有动画“虫洞”：我们对浏览器的性能寄予厚望 当我们在1.6版中添加支持时，requestAnimationFrame API。 然而，这是自那以来我们收到的数量最多的投诉之一 然后与当选项卡不可用时requestAnimationFrame的行为方式相关 看得见的选项卡不可见时启动的所有动画 “stack”和在选项卡恢复焦点之前不会执行。 然后它们都以扭曲的速度运动我们已删除对此的支持 API（它对调用jQuery动画的方式没有影响 并计划将其合并到jQuery的未来版本中

您应该将jquery版本升级到至少1.6.3

---

最重要的问题是为什么有时动画运行得很快。我的意思是图像变化非常快。代码中是否有任何问题。这是url，请查看问题。在firefox的两个不同选项卡中打开我的站点和另一个任意站点。只需坚持几分钟，比如说2或3分钟，然后回到我的网站，然后你可以看到幻灯片放映速度非常快，再次恢复正常。我认为.end（）函数正在制造问题。如何修复它？有什么想法吗？.appendTo（'.headerCarouselwrapper'）似乎图像在具有样式“headerCarouselwrapper”的div中的最后一个位置被追加。我这里有混乱，所有的图像都在div中，它带有headerCarouselwrapper样式。如果所有的图像都在div中，那么为什么我要用.appendTo（'.headerCarouselwrapper'）这样的代码再次将相同的图像附加到div中，有人能告诉我第一个孩子已经在div中，并且有一个名为headerCarouselwrapper的类，那么需要如何再次将第一个孩子附加到headerCarouselwrapper div中，比如appendTo（’headerCarou

$('.headerCarouselwrapper img:gt(0)').hide();

setInterval(function () {
    // executes every 5000 milliseconds
}, 5000);

// get first child in ".headerCarouselwrapper" which is the currently
// visible image and fade it out
$('.headerCarouselwrapper :first-child').fadeOut()
// get the next <IMG> and fade it in
.next('img').fadeIn()
// get back the image that was faded out
// and append it (move it) at the end of the container
// so the slideshow cycle
.end().appendTo('.headerCarouselwrapper');