2012-01-12 74 views
1

所以,我有這3個選項卡式部分顯示和隱藏onClick,但現在我希望他們也像幻燈片演示,如果用戶不點擊任何地方。jQuery顯示和隱藏計時器

以下是我有:

$(document).ready(function() { 
    function rClass() { 
     $('.slide_1_link').removeClass('on'); 
     $('.slide_2_link').removeClass('on'); 
     $('.slide_3_link').removeClass('on'); 
    } 
    function rFadeOut() { 
     $('.slide_1').fadeOut(); 
     $('.slide_2').fadeOut(); 
     $('.slide_3').fadeOut(); 

     $('.slide_content_1').fadeOut(); 
     $('.slide_content_2').fadeOut(); 
     $('.slide_content_3').fadeOut(); 
    } 
    $('.slide_1_link').click(function(){ 
     rClass(); 
     rFadeOut(); 
     $('.slide_1_link').addClass('on'); 
     $('.slide_1').fadeIn(); 
     $('.slide_content_1').fadeIn(); 
    }); 
    $('.slide_2_link').click(function(){ 
     rClass(); 
     rFadeOut();  
     $('.slide_2_link').addClass('on'); 
     $('.slide_2').fadeIn(); 
     $('.slide_content_2').fadeIn(); 
    }); 
    $('.slide_3_link').click(function(){ 
     rClass(); 
     rFadeOut(); 
     $('.slide_3_link').addClass('on'); 
     $('.slide_3').fadeIn(); 
     $('.slide_content_3').fadeIn(); 
    }); 

}); 

是否有人知道一個良好的計時器插件或實現該功能的簡單方法?

謝謝你的時間!

回答

2

你可以寫一個函數觸發又將三通單擊事件,然後設置使用setInterval像這樣每5秒運行:

var cycleIndex = 0; 

function cycle() { 
    var index = cycleIndex % 3; 
    $('.slide_' + (index + 1) + '_link').click(); 
    cycleIndex += 1; 
} 

setInterval(cycle, 5000); 
+0

甜..工作!謝謝你的幫助.. – Amine 2012-01-13 00:45:01

1

顯示/隱藏或淡入通過的jQuery /淡出股利有延時功能,通過它您可以添加計時器到動畫

$("button").click(function() { 
    $("div.first").slideUp(300).delay(800).fadeIn(400); 
    $("div.second").slideUp(300).fadeIn(400); 
}); 

檢查以下鏈接http://api.jquery.com/delay/

+0

感謝 你的答案!沒有顯示和隱藏..就像一個定時器,所以5秒後,它會隱藏第一個選項卡,並顯示第二個等等..第三個選項卡和接下來的5秒.. – Amine 2012-01-12 14:46:09

+0

檢查此函數javascript var t = setTimeout( 「javascript語句」,毫秒); – 2012-01-12 14:51:31

+0

檢查javascript setInterval(expression,interval)的這個函數; – 2012-01-12 15:00:28