Question

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

这里是html和jquery代码

<div class="headerCarouselwrapper">
            <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image1.jpg" />
            <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image2.jpg" />
            <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image3.jpg" />
            <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image4.jpg" />
</div>

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

我需要知道的两件事

1）此代码的工作原理。如果可能的话告诉我每个人的工作方式

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

感谢

Answer 1

它的作用

$(document).ready - 将事件处理程序绑定到ready事件，该事件在DOM准备好进行操作时触发。请参阅ready。

$('.headerCarouselwrapper img:gt(0)').hide() - 隐藏与选择器匹配的所有元素。在这种情况下，它选择所有图像（除第一个之外），它们是具有“headerCarouselwrapper”类的元素的后代。请参阅hide和:gt。

setInterval - 以给定间隔重复某事。在这种情况下给出的间隔是5000毫秒（5秒）。作为第一个参数传递的匿名函数是重复的内容。请参阅MDN上的setInterval。

$('.headerCarouselwrapper :first-child').fadeOut() - 使用“headerCarouselwrapper”类淡出每个元素的第一个子元素。请参阅fadeOut和:first-child

.next('img').fadeIn() - 淡入紧随其后的兄弟元素（如果它是img元素）。请参阅next和fadeIn。

.end() - 将当前所选元素从同级元素返回到原始:first-child。请参阅end。

.appendTo('.headerCarouselwrapper') - 将当前选定的元素附加到具有“headerCarouselwrapper”类的任何元素。请参阅appendTo。

通过查看jQuery文档，您可以自己完成大部分工作。

Answer 2

$(document).ready(function () { // waits util the page has fully loaded before initialising
$('.headerCarouselwrapper img:gt(0)').hide(); // hide every image except for the first
    setInterval(function () { // call the following code every 5 seconds
        $('.headerCarouselwrapper :first-child').fadeOut() // hide the first image
        .next('img') // select the next image
        .fadeIn() // fade this in
        .end() // end the previous selection ... i.e. go back to the first image again
        .appendTo('.headerCarouselwrapper'); // append to the wrapper, i.e. move it to the end of the list of images
    }, 5000);
});

我猜这些奇怪的计时问题与fadeIn（）和fadeOut（）有关。它们都设置了自己的超时循环，而javscript queues up timeouts and intervals internally这可能会干扰主间隔的执行。

Answer 3

代码包含在“就绪”处理程序中。一旦加载了DOM，就会执行匿名函数绑定到“ready”事件（当加载页面中的所有资源时，“load”事件将触发--html，images，js，css ......）
```
 $(document).ready(function () { 
     // executes when the DOM is ready
 });
```
jQuery ready event
隐藏除第一张以外的所有图片：
```
$('.headerCarouselwrapper img:gt(0)').hide();
```
伪选择器允许匹配元素的索引大于 - 然后指定一个。 .headerCarouselwrapper img找到容器中的所有图片，:gt(0)过滤器中的所有图片都包含除第一个之外的所有图片。

:gt() selector

每隔5秒执行一次功能：

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

setInterval()

在每5秒执行一次的匿名函数中，使用类.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');

.end()
.append()

关于快速动画

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

jQuery 1.6引入了对API requestAnimationFrame的支持（FF和Chrome支持，但我认为不支持IE）。它显示有问题：

没有动画“虫洞”：我们对浏览器寄予厚望我们在版本1.6中添加了支持时的requestAnimationFrame API。然而，这是我们自那时以来收到的最高投诉量之一然后涉及当选项卡不是时，requestAnimationFrame的行为方式可见。选项卡不可见时启动的所有动画 “堆栈”并且在选项卡重新聚焦之前不会执行。然后他们都以翘曲的速度制作动画！我们已经取消了对此的支持 API（对你调用jQuery动画的方式没有影响功能）并计划将其合并到未来版本的jQuery中。

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

Source

需要解释有关幻灯片的jquery代码

这里是html和jquery代码

3 个答案: