Question

我正在尝试构建一个图像淡入淡出系统;我目前的代码是：

$(document).ready(function(){
        $(".slider#1").delay(1000).fadeIn(2000);
        $(".slider#1").delay(1000).fadeOut(2000);
        $(".slider#2").delay(6000).fadeIn(2000);
        $(".slider#2").delay(1000).fadeOut(2000);
        $(".slider#3").delay(11000).fadeIn(2000);
        $(".slider#3").delay(1000).fadeOut(2000);
        $(".slider#4").delay(16000).fadeIn(2000);
        $(".slider#4").delay(1000).fadeOut(2000);
        });

我怎样才能这样做，一旦结束就会自动重复？

Answer 1

你可以使用jQuery .promise()的{{1}}来监听完成后再次运行：

.done()

注意：您的数字$(document).ready(function(){ runShow(); function runShow() { $(".slider#1").delay(1000).fadeIn(2000); $(".slider#1").delay(1000).fadeOut(2000); $(".slider#2").delay(6000).fadeIn(2000); $(".slider#2").delay(1000).fadeOut(2000); $(".slider#3").delay(11000).fadeIn(2000); $(".slider#3").delay(1000).fadeOut(2000); $(".slider#4").delay(16000).fadeIn(2000); $(".slider#4").delay(1000).fadeOut(2000); $('.slider').promise().done( runShow ); } });可能存在问题;所以考虑使用有效的。

Answer 2

var fadeTime = 1000,
    bannerDuration = 2000;
function rotateBanner() {
    var $current = $('.slider:visible');
    var $next = $current.next();
    if($next.length === 0) {
        $next = $('.slider:first');
    }
    $current.fadeOut(fadeTime);
    $next.fadeIn(fadeTime);
}
document.onload = function() {
    setInterval('rotateBanner()', bannerDuration);
};

循环JQuery函数

2 个答案: