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？听起来这正是你想要做的，它提供了很大的灵活性。我自己用过这个插件，效果很好。强烈推荐。

Answer 2

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

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

Answer 3

你有两次id =“img2”。

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

Answer 4

你的问题是，如果你在img2完成淡入之前点击它，currentImage仍然认为你正在考虑img1和img2之间的转换，但实际上img2现在正在运行，你正在等待img3。 / p>

我认为Jim的解决方案应该会让你感觉良好。

作为freebee，请考虑添加此项，以便您无需编辑脚本即可添加更多图像：

numImages = $("a > img").size();

Answer 5

也

setInterval (function () {
    $("img:eq(0)").fadeOut ("slow").next ("img").fadeIn ("slow");
}, 2000);

Answer 6

我使用基于snook.ca's simplest jquery slideshow的函数我遇到了类似的问题。（请参阅我的评论@tom）虽然无论是否点击或滚动都会发生我的想法！

似乎在第一次完成循环之后，时间变得混乱并开始一半淡入或淡出并且只是没有褪色而跳入！我正在观察firebug中的html面板，发现css display属性没有正确地从'block'设置回'none'，最终导致所有设置display:block的图像都没有设置假设淡出状态。

我确实想知道这是否是一个时间问题，淡入淡出速度与setInterval延迟混乱导致混合的触发顺序。如果是这种情况，那么我不知道如何解决它。

但是看过css行为后，我现在想知道它是否是jQuery实现它的'fadeIn'和'fadeOut'函数的方式的潜在问题？!!

Answer 7

我为您的代码提供了一些解决方法，并提出了以下工作代码：

$(document).ready(() => {

let numImages = 4;
let currentImage = 1;

function changeImage() {
    $('#img-' + currentImage).fadeOut(1000, function() {
        if (currentImage === numImages) {
            currentImage = 0;
        }
        currentImage++;
        $('#img-' + currentImage).fadeIn(1000, function() {
            changeImage();
        });
    })
}

changeImage();

})

JQuery fadeIn fadeOut与setInterval偶尔一起工作

7 个答案: