JQuery fadeIn fadeOut与setInterval偶尔一起工作

Question

我有一堆图像需要每2秒一次旋转进出一个花哨的JQuery fadeIn和fadeOut.我有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？听起来这正是你想要做的,它提供了很大的灵活性.我自己用过这个插件,效果很好.强烈推荐.