如何在jQuery上重複或循環這個隊列？

Question

這是褪色幻燈片的代碼。有沒有辦法重複或循環這個隊列？要在這上面的代碼$("#page2_image").hide();

再次啓動下面的代碼jQuery中：

$(document).ready(function(){ 
    $("#page2_image").hide(); 
    $("#page3_image").hide(); 
    $("#page1_image").fadeOut(10000); 
    $("#page2_image").fadeIn(10000).fadeOut(10000); 
    $("#page3_image").delay(10000).fadeIn(10000); 
}); 

謝謝您的幫助！

Answer 1

可以使用的fadeIn()

$(document).ready(function(){ 
    function loop(){ 
    $("#page2_image").hide(); 
    $("#page3_image").hide(); 
    $("#page1_image").fadeOut(10000); 
    $("#page2_image").fadeIn(10000).fadeOut(10000); 
    $("#page3_image").delay(10000).fadeIn(10000,loop); // call loop here... 
    } 
    loop(); 
}); 

回調你也可以嘗試類似的做法here

Answer 2

我認爲你正在尋找的是一個稍微不同的方法，像這樣：

$(function() { 
    var images = ['#page1_image', '#page2_image', '#page3_image'], i = 0; 
    function rotate() { 
    $(images[i]).fadeOut(10000); 
    i = (i+1)%images.length; 
    $(images[i]).fadeIn(10000, rotate); 
    } 
    $.each(images.slice(1), function(index, val) { $(val).hide(); }); 
    rotate(); 
});​ 

Give it a try here，如果不順利淡化返回到第一個im年齡，當循環循環時，您的動畫將有一個跳躍。上面的內容順暢地消失，並且適用於任何想要循環的元素，只需將它們的選擇器添加到數組中即可。

的組件包括：

• 設置選擇器陣列褪色......你甚至可以緩存選擇在這裏如果他們不標識這是一個好主意，而不是字符串。
• 旋轉淡出當前，獲取下一個（如果需要環繞）並淡入，.fadeIn()將在完成後再次調用rotate。
• 最後，我們隱藏除第一個以外的所有圖像（通過.slice()），並啓動循環。

Answer 3

使用setInterval使函數每X秒重複一次。

function slideSwitch() { 
    $("#page2_image").hide(); 
    $("#page3_image").hide(); 
    $("#page1_image").fadeOut(10000); 
    $("#page2_image").fadeIn(10000).fadeOut(10000); 
    $("#page3_image").delay(10000).fadeIn(10000); 
} 

$(function() { 
    setInterval(slideSwitch, xxxx); 
});