如何让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);