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

如何让jQuery循环点击每隔几秒钟？

3 个答案: