使滑塊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/