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

我认为您最好使用滚动器库，例如 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

基本上使 click 函数成为一个实际的命名函数，然后每 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);