How to Make jQuery Cycle Through Clicks Every Few Seconds?

I have created a very basic image slider that changes images when a div is clicked (code below). I would like to set it to auto-progress every 5 seconds. Looking at other posts, it seems like I could do something with window.setInterval(event, 5000); and then have the event fire a click on the next div every 5 seconds. I am having some trouble setting up this each function though. My code is below, I would appr开发者_开发百科eciate any help:

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;
  });
});

Try this:

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

I think you'll be better off using a scroller library such as jQuery Cycle: http://jquery.malsup.com/cycle/

It's easy to implement, has a small footprint, lots of examples, and you would just need to modify your HTML a little bit to implement it. It solves your problem too.

If you really want your solution, how about this (modified @Jeff's)

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

Basically make the click function an actual named function, then call that every 5 seconds like so:

$('#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);