使滑块li项目被一个接一个点击

Question

我有一个滑块，我想要自动滑动。

setInterval(function() { 
    $('.navigation li').trigger('click'); 
}, 100); 

此代码使其移动，但点击总是在第一个li项目上执行，所以第三个幻灯片从不显示。我怎样才能让它点击它们并自动重新开始，让我们说“循环”？

检查这个链接，看看如何滑块与此代码行为...

http://goo.gl/MX6WjD

Answer 1

通过使用选择eq()索引诡计达到li S上的长度全部li试试循环：

$(function(){ 
    setTimeout(function(){ 

     var slide_count = $('.navigation li').length; 
     var cpt=0; 

     setInterval(function() 
     { 
      if(cpt < slide_count) 
      { 
       $('.navigation li:eq('+cpt+')').click(); 

       cpt++; 
      }else{ 
       cpt=0; 
      } 
     }, 2000); 

    }, 1000); 

}); 

Live Example（循环滑动，每2秒）。

希望这会有所帮助。

Answer 2

实际上您需要使用setTimeout()而不是setInterval()，因为setInterval()会在运行后设置另一个超时，这会在等待期间产生不一致。代码在确定的确切时间段内执行。

下面的代码会在确切的时间段内对每个li发起一次点击。这里超时设置为4秒，但您可以根据自己的需要进行设置。

<ul class="navigation"> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
</ul> 

<script> 
$().ready(function(){ 
var totalEle = $('.navigation li').length; 
var currentElement = 0; 
var transitionTime = 4000; // 4 sec 

function Transition() 
{ 
    setTimeout(function() {  
    alert("Image " + $('.navigation li').eq(currentElement).text() + " was clicked"); 
    currentElement < (totalEle - 1) ? currentElement++ : currentElement = 0; 
      Transition();   
    }, transitionTime); 
} 

Transition(); 
}); 
    </script> 

工作例如：http://jsfiddle.net/rLanzn2w/17/