Question

我写了这个简单的代码，为我的网站制作一个基本的幻灯片。这段代码工作正常一段时间，但之后它开始出现故障，我的意思是图像没有正确加载，同样的图像突然弹出并淡出然后慢慢地再次出现。我虽然SetTimeOut的时机可能有问题，但我玩了很多但它没有解决我的问题：

    var x = 1;
    function F() {
        $('#Left').html("<img src='Images/" + x + ".jpg' />").fadeOut(0).fadeIn(1000).delay(5000).fadeOut(1000);
        if (x < 3) { x++;}
        else { x = 1; }
        setTimeout("F()", 7000);
    }

我的问题是简单代码可能出现什么问题，我该如何解决或改进它。

Answer 1

我认为你可能有一个问题，淡入淡出操作不会花费7秒，但你的超时计划为7秒，所以随着时间的推移，两者没有正确排队。通过使用完成功能完成最后一次淡入淡出时，您可以通过启动下一个动画使它们完美排列而不会出现累积错误。

   var x = 1;
   function F() {
        $('#Left').html("<img src='Images/" + x + ".jpg' />")
            .fadeOut(0)
            .fadeIn(1000)
            .delay(5000)
            .fadeOut(1000, F);
        if (x < 3) { x++;}
        else { x = 1; }
    }

javascript幻灯片显示一段时间后出现故障

1 个答案: