滑块前进按钮上的jQuery setInterval

我正在尝试做一个滑块并且遇到一些问题。您可以看到我有一个#timer按钮，当您单击该按钮时，它会推进下一张幻灯片，没有任何问题用它。滑块前进按钮上的jQuery setInterval

但我希望它点击自身，所以我想使用setInterval但不能这样做。另外，关于触发第一次点击navitem没有问题，但不能在该按钮上设置setInterval。

<script type="text/javascript"> 
$(window).load(function() { 
    $('.slideritem p').stop(true).show(1000); 
}); 

$(document).ready(function() { 
    $('.slideritem').hide(); 
    $('.slideritem:first').fadeIn(1000); 

    $('.navitem').click(function() { 
     var index = $('.navitem').index(this) 
     var indexlast = $('.navitem').index(this) + 1 
     $('.slideritem').hide(); 
     $('.slideritem:nth-child(' + indexlast + ')').stop(true).fadeIn(1000); 
     $('.navitem img ').removeClass('current'); 
     $('.navitem:nth-child(' + indexlast + ') img ').addClass('current'); 

     $('#timer').click(function() { 
      index++$('.slideritem').hide(); 
      $('.slideritem').eq(index).fadeIn(1000); 
      $('.navitem img').removeClass('current'); 
      $('.navitem img').eq(index).addClass('current'); 

      if (index == 3) { 
       index = -1 
      } 
     }); 
    }); 

    $('.navitem:first').trigger('click'); 
    setInterval($('#timer').trigger('click'), 1500); 
});  
</script>

来源

2013-08-21 user2694307

小提琴。 –

@Tushar Gupta http://jsfiddle.net/YjEzD/ – user2694307

不要为此触发点击事件。这是一个坏习惯。

为滑动效果制作单独的功能。然后分别从点击和计时器中调用它。

应该是这样的：

function Slide() { 
    // Perform the sliding here 
} 

$('#timer').click(Slide); 

setInterval(Slide,1500);

我做了你的代码的一些改进，现在它的工作。还有几件事情可以改善...

jsFiddle Demo

来源

2013-08-21 09:27:03 Itay

为什么这是一个坏习惯？ – putvande

这是一个滑块，但它没有幻灯片效果，它有一些淡入淡出效果。这里的小提琴http://jsfiddle.net/YjEzD/ – user2694307

@putvande我相信这是一个坏习惯，因为也许点击事件将有一天会做其他除滑动以外的动作，但间隔仍然应该只滑动。所以肌酸一个单独的滑动功能是最佳做法 – Itay

滑块前进按钮上的jQuery setInterval

回答

相关问题