幻灯片使用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);