Как сделать, чтобы jQuery циклически проходил клики каждые несколько секунд?

Question

Я создал очень простой слайдер изображений, который меняет изображения при нажатии на элемент div (код ниже).Я хотел бы установить его для автоматического выполнения каждые 5 секунд.Глядя на другие сообщения, кажется, что я мог бы что-то сделать с window.setInterval(event, 5000);, а затем событие вызывать клик на следующем div каждые 5 секунд.У меня возникли проблемы с настройкой этой функции, хотя.Мой код ниже, я был бы признателен за любую помощь:

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

Я думаю, вам лучше использовать библиотеку скроллеров, например, jQuery Cycle: http://jquery.malsup.com/cycle/

Его легко реализовать, он занимает мало места, много примеров, и вам просто нужно немного изменить свой HTML, чтобы реализовать его. Это тоже решает твою проблему.

Если вам действительно нужно ваше решение, как насчет этого (модифицированный @ 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);

Answer 3

По сути, сделать функцию щелчка фактической именованной функцией, а затем вызывать ее каждые 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);