我使用 jQuery 创建了一个图像幻灯片,其中 5 个图像在 25 秒的时间间隔内依次出现。每个图像在淡出之前保持 5 秒,然后下一个图像淡入。
幻灯片工作正常,但我希望它永远循环播放, 即在最后一张图像淡出后,它应该从第一张图像重新开始动画。
我尝试使用setInterval
但无法成功。这是我编写的幻灯片的工作示例:
这是完整的代码:
HTML:
<img id="img1" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img2" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-1.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img3" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-2.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img4" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-3.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img5" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-4.jpg" style="display: block; width: 50%; position: absolute;" />
Javascript:
$(document).ready(function(){
$("#img2,#img3,#img4,#img5").hide();
setTimeout(function(){
$("#img1").fadeOut("slow", function () {});
}, 5000);
setTimeout(function(){
$("#img2").fadeIn("slow", function () {});
}, 5000);
setTimeout(function(){
$("#img2").fadeOut("slow", function () {});
}, 10000);
setTimeout(function(){
$("#img3").fadeIn("slow", function () {});
}, 10000);
setTimeout(function(){
$("#img3").fadeOut("slow", function () {});
}, 15000);
setTimeout(function(){
$("#img4").fadeIn("slow", function () {});
}, 15000);
setTimeout(function(){
$("#img4").fadeOut("slow", function () {});
}, 20000);
setTimeout(function(){
$("#img5").fadeIn("slow", function () {});
}, 20000);
setTimeout(function(){
$("#img5").fadeOut("slow", function () {});
}, 25000);
});