Question

我有一个javascript函数，循环遍历div中的背景图像。它运行良好，但它贯穿所有图像时停止。如何完成后再怎么称呼？

 $(document).ready(function(){
        FlipBackgroundOver();
    });

function FlipBackgroundOver() 
    { 

        $(".bkgrndimg").each(function(index) {
            $(this).hide();
            $(this).delay(5000 * index).fadeIn(5000).fadeOut();
        });

    }

如果我添加FlipBackgroundOver（）;在函数内部，它进入无限循环，因为延迟不会停止函数执行。

以下是我与之合作的小提琴：http://jsfiddle.net/RyGKV/

Answer 1

在jq 1.6+上，你应该使用promise()相关的回调：

function test() {
    $("img").each(function(index) {
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    }).promise().done(test);
}

-jsFiddle-

Answer 2

您可以使用setInterval以dealy

重复执行

 $(document).ready(function(){
    setInterval(FlipBackgroundOver, 10000); // delay should be based on the number of images => numer_of_images * delay_for_each
});

您可以根据所拥有的图像数量将延迟更改为所需的值。

Answer 3

由您自己创建一个无限间隔的循环。我为此使用了辅助函数next。

var elements = $("img");
var index = 0;

function next() {
    index = ++index == elements.length ? 0 : index;
    elements.hide().eq(index).fadeIn(3000).fadeOut();
}

function start() {
    // show first one directly
    next();

    // start infinite loop
    setInterval(function() {
         next();
    }, 3000);
}

start();

Working example.

重复一个javascript函数，但有一个延迟

3 个答案:

-jsFiddle-