jQuery - 如何循环功能?
问题描述:
我想做一个基本的淡入淡出幻灯片。我只让它自动运行一次。 如何让它有一个循环?jQuery - 如何循环功能?
HTML
<img src="image1.jpg" class="img1">
<img src="image2.jpg" class="img2">
JS
$(document).ready(function() {
function playslider(){
$('.img1').fadeIn(800).delay(800).fadeOut(800);
$('.img2').delay(1600).fadeIn(800).delay(800).fadeOut(800);
}
playslider();
});
答
尝试将其更改为这样:
$(document).ready(function() {
function playslider(){
$('.img1').fadeIn(800).delay(800).fadeOut(800);
$('.img2').delay(1600).fadeIn(800).delay(800).fadeOut(800, playslider);
//^callback function
}
playslider();
});
这就是所谓的 “回调函数”。这个想法是,当你最后的淡出完成时它会被调用。你可以阅读更多here。
答
您可以使用好老的Javascript:
$(document).ready(function() {
function playslider(){
// code to execute
x = setTimeout("playslider()", 5000); //will loop every 5 seconds.
}
playslider(); //start it up the first time
});
+0
为什么x = setTimeout(“playslider()”,5000);不起作用? – KnightMax 2012-03-14 04:37:46
答
答案是:
$(document).ready(function() {
function playslider(){
// code to execute
x = setTimeout(function(){playslider()}, 5000);
}
playslider();
});
答
它的作品不错,但如果u以这种方式改变它,它工作得更好
$('.img1').fadeIn(800).delay(800).fadeOut(800);
$('.img2').delay(2400).fadeIn(800).delay(800).fadeOut(800, playslider);
只是增加达赖时间至2400(2400 = 800 + 800 + 800)
你的意思是你想自动播放它只有一次? – Shaheer 2012-03-14 04:28:27
不,我做到 - > fadeOut(800,playslider)。如何让最后的图像淡出并与下一个第一张图像交叉淡入淡出? – KnightMax 2012-03-14 04:33:03