Question

我有一个从图像1到图像2的淡入淡出，但我想要的是，从图像1淡化到图像2再到图像3到图像1等等，以while(true)种方式无限地无限延伸。我怎样才能做到这一点。我可以在这里看到：http://jsfiddle.net/bbqunfhu/23/我试图在delay(2000)之后实现第二次淡出，但即使这样似乎也不起作用。任何帮助将不胜感激。

Answer 1

请参阅http://jsfiddle.net/bbqunfhu/24/

您无法为背景图像设置动画，因此您需要包含具有不同背景的不同div并对其进行迭代。这是你可以迭代所有div与某个类。这是做什么的;它获取所有div，找到第一个可见的div，淡出它，在fadeOut的回调中，它找到下一个div（如果当前div是最后一个div，它通过使用得到第一个div如果你需要添加更多背景图片，只需将它们添加到%类的页面中，你就不需要修改代码。

bckgnd

Answer 2

在Javascript中使用delay（）时要小心！执行不会退出该函数，导致一般的卷曲行为。 Javascript提供了一组很好的计时功能，其中一个是你正在使用的（setTimeout）。

setTimeout（func，milliseconds）将在经过一段时间后调用函数
setInterval（func，milliseconds）将每隔一段时间调用一次函数，直到调用clearInterval

这是一个让三个函数按照您希望的方式进入圆圈的示例：

function func1()
{
   // Do something like fading etc.
   setTimeout(func2, 1000);
}

function func2()
{
   // Do something like fading etc.
   setTimeout(func3, 1000);
}

function func3()
{
   // Do something like fading etc.
   setTimeout(func1, 1000);
}

// Call func1 somewhere here, maybe when page is loaded!

会发生什么：当func1被调用时，它会执行一些命令（比如你需要的淡入淡出），然后它将注册一个将在1秒后触发的回调并将控件返回到页面。您将能够与该页面正常交互。一旦第二个过去，将触发超时并调用回调。在这种情况下，回调指向func2，它将执行一些命令，向func3注册一个回调，返回控件等等。

希望有所帮助！

在无限循环中淡化图像

2 个答案: