jQuery fadeIn fadeOut与setInterval偶尔工作

我有一堆需要每隔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++;
        });
    });
}

---

你有没有想过使用Cycle Plugin？ 这听起来像这正是你想要做的，它提供了很大的灵活性。 我自己使用这个插件的结果很棒。 强烈推荐。

---

就在我头顶......为什么你要在回调函数中执行currentImage簿记？ 在我看来，这很容易，甚至可能与您的问题有关：

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

---

你有两次id =“img2”。

你不能简化 - 首先计算当前和下一个ID。 然后执行$（）。fadeOut（）和下一行$（）。fadeIn（），并避免所有的函数复杂性。

链接地址: http://www.djcxy.com/p/64755.html

上一篇: JQuery fadeIn fadeOut with setInterval working sporadically

下一篇: Read/Write large XMLs without using too much memory in PHP