如何讓jQuery通過點擊每隔幾秒鐘循環？

Question

我創建了一個非常基本的圖像滑塊，可以在點擊div時更改圖像（代碼如下）。我想將其設置爲每5秒自動進行一次。看看其他帖子，似乎我可以用window.setInterval(event, 5000);做些事情，然後讓事件每隔5秒觸發一次下一個div。不過，我在設置每個功能時遇到了一些麻煩。我的代碼是下面，我希望得到任何幫助：

HTML：

<div id="slider"> 
    <div id="slider-images"> 
     <img class="1" src="assets/slider-1.jpg" width="613" height="344"> 
     <img class="2" src="assets/slider-2.jpg" width="613" height="344"> 
     <img class="3" src="assets/slider-3.jpg" width="613" height="344"> 
     <img class="4" src="assets/slider-4.jpg" width="613" height="344"> 
     <img class="5" src="assets/slider-5.jpg" width="613" height="344"> 
     <img class="6" src="assets/slider-6.jpg" width="613" height="344"> 
    </div> 

<div id="slider-nav"> 
    <div class="description" id="1"> 
    <h1>Heading 1</h1> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
    </div> 
    <div class="description" id="2"> 
    <h1>Heading 2</h1> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
    </div> 
    <div class="description" id="3"> 
    <h1>Heading 3</h1> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
    </div> 
    <div class="description" id="4"> 
    <h1>Heading 4</h1> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
    </div> 
    <div class="description" id="5"> 
    <h1>Heading 5</h1> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
    </div> 
    <div class="description" id="6"> 
    <h1>Heading 6</h1> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
    </div> 
</div> 

的jQuery：

$(function() { 
    //homepage slider 
    $('#slider-nav div:first').addClass('current'); 
    $('#slider-images img').hide(); 
    $('#slider-images img:first').addClass('current').show(); 

    $('#slider-nav div').click(function(){ 
    var id  = $(this).attr('id'); 
    var sliderImg = "#slider-images img"; 
    $(sliderImg).removeClass('current'); 
    $(sliderImg).fadeOut('slow'); 
    $(sliderImg + "." + id).fadeIn('slow'); 

    $("#slider-nav div").removeClass('current'); 
    $(this).addClass('current'); 
    return false; 
    }); 
}); 

Answer 1

試試這個：

setInterval(function() 
{ 
    var $next = $('#slider-nav div.current').next(); 
    if ($next.length==0) $next = $('#slider-nav div:first') 
    $next.trigger('click') 
}, 5000); 

Answer 2

基本上使點擊功能的實際命名的函數，然後調用每隔5秒鐘如此：

$('#slider-nav div').click(myClickHandler()); 
//Might have to do "myClickHandler()" - I cannot test this right now 

function myClickHandler() 
{ 
    var id  = $('#slider-nav div').attr('id'); 
    var sliderImg = "#slider-images img"; 
    $(sliderImg).removeClass('current'); 
    $(sliderImg).fadeOut('slow'); 
    $(sliderImg + "." + id).fadeIn('slow'); 

    $("#slider-nav div").removeClass('current'); 
    $('#slider-nav div').addClass('current'); 
    return false; 
} 

window.setInterval("myClickHandler()", 5000); 

Answer 3

我想你會更好使用滾動條庫如jQuery週期：http://jquery.malsup.com/cycle/

這很容易實現，具有佔地面積小，大量的例子，你只需要稍微修改一下你的HTML就可以實現它。它也解決了你的問題。

如果你真的想你的解決方案，這個怎麼樣（修改@傑夫）

var $next; 
setInterval(function() 
{ 
    if ($next == undefined || $next.next().length == 0) { 
     $('#slider-nav div:first'); 
    } else { 
     $next = $next.next(); 
} 
$next.trigger('click'); 
}, 5000);