jQuery - 如何循環功能？

我想做一個基本的淡入淡出幻燈片。我只讓它自動運行一次。如何讓它有一個循環？jQuery - 如何循環功能？

HTML

<img src="image1.jpg" class="img1"> 
<img src="image2.jpg" class="img2">

$(document).ready(function() { 
function playslider(){ 
     $('.img1').fadeIn(800).delay(800).fadeOut(800); 
     $('.img2').delay(1600).fadeIn(800).delay(800).fadeOut(800); 
} 
playslider(); 
});

來源

2012-03-14 KnightMax

你的意思是你想自動播放它只有一次？ – Shaheer 2012-03-14 04:28:27

不，我做到 - > fadeOut（800，playslider）。如何讓最後的圖像淡出並與下一個第一張圖像交叉淡入淡出？ – KnightMax 2012-03-14 04:33:03

嘗試將其更改爲這樣：

$(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。

來源

2012-03-14 04:27:14

Thanks.How我讓最後一個圖像淡出，並與下一個第一個圖像淡入淡出。 – KnightMax 2012-03-14 04:30:09

交叉衰落超出了您當前的問題範圍，因此我很難在評論中回答。我會建議爲該特定問題創建一個新問題。我會說在過去，我通常使用jQuery插件來處理交叉淡化。 – 2012-03-14 04:46:07

@AbeMiessler尼斯one.learned一個新的詭計現在..謝謝 – Gopesh 2012-03-14 05:19:24

您可以使用好老的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 

});

來源

2012-03-14 04:30:38

爲什麼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(); 

});

來源

2013-12-30 19:49:08 Belabu

它的作品不錯，但如果u以這種方式改變它，它工作得更好

$('.img1').fadeIn(800).delay(800).fadeOut(800); 
    $('.img2').delay(2400).fadeIn(800).delay(800).fadeOut(800, playslider);

只是增加達賴時間至2400（2400 = 800 + 800 + 800）

來源

2014-10-12 09:45:33

jQuery - 如何循環功能？

回答

相關問題