jquery - 使用 jquery 动画的幻灯片

Question

我想为网站创建一个简单的幻灯片。在这里，我试图无限调用函数slideShow 。但是该功能一直有效，直到动画功能结束。但是当尝试再次设置 CSS 属性时它不起作用。迭代也不起作用。请指出我在哪里犯了错误。提前致谢。

$(document).ready(function () {
    function slideShow() {
        $('#image1').delay(2000).animate({
            opacity: 0
        }, 5000);

        $('#image2').delay(2000).animate({
            opacity: 1
        }, 5000);

        //After this point nothing seems to be working.
        $("#image1").css("opacity", "1");
        $("#image2").css("opacity", "0");
        slideShow();
    };

    slideShow();
};

Answer 1

在 animate() 完成 5 秒的持续时间之前，您正在更改图像的 CSS 属性。

再次调用该函数，但在 5 秒后。这完美地工作：

$(document).ready(function () {
    function slideShow() {
        $('#image1').animate({opacity: 0,}, 5000);
        $('#image2').animate({ opacity: 1}, 5000);
    setTimeout(function(){
        $("#image1").animate({opacity: 1,},5000);
        $("#image2").animate({opacity: 0,},5000);
        slideShow(); // call it recursively but after 5 seconds
        }, 5000);      
    };
    slideShow();
});

谢谢。:)

Answer 2

用这个替换最后一个slideShow();，重复 10 秒：

setInterval(function () { slideShow(); }, 10000);