javascript - JQuery fadeIn fadeOut 与 setInterval 偶尔工作

Question

我有一堆图像，需要使用奇特的 JQuery fadeIn 和 fadeOut 每 2 秒一次轮换一张。我在 HTML 中预加载了所有图像，并设置了一个 setInterval 计时器来淡出当前图像，然后淡入下一个图像。问题是，有时当您在淡入/淡出过程中单击或滚动时， JS 被中断，当前图像永远不会消失，下一个图像会淡出，给你两张图像。

我感觉这与 setInterval 没有每 2 秒正常运行一次有关，但是有没有更好的方法来完成我需要的功能？

这是一段代码:

HTML

<a href="javascript:;">
  <img id="img1" src="image1.gif" />
  <img id="img2" src="image2.gif" style="display:none;" />
  <img id="img3" src="image3.gif" style="display:none;" />
</a>

JS

var numImages = 3;
var currentImage = 1;
imageInterval = window.setInterval("changeImage();", 2000);

function changeImage()
{
    $("#img" + currentImage).fadeOut("slow", function() {
        if (currentImage >= numImages)
        {
            currentImage = 0;
        }
        $("#img" + (currentImage + 1) ).fadeIn("slow", function() {
            currentImage++;
        });
    });
}

Answer 1

您是否考虑过使用 Cycle Plugin ？听起来这正是您想要做的，并且提供了很大的灵 active 。我自己使用过这个插件，效果很好。强烈推荐。