2011-02-12 14 views
0

(新手在這裏)我有一個帶有時間延遲值變量的setTimeout循環。它循環遍歷ul,將一個類添加到列表項中,在預定的時間量之後,它刪除該類並跳轉到下一個列表項;重複該過程直到它已經到達最後(li)在setTimeout循環中以錯誤順序應用時間延遲變量

問題是時間延遲值被錯誤地應用。最後一次延遲值應用於倒數第二個列表項而不是最後一個。

http://jsfiddle.net/bizarroZ/YyDjW/

<style type="text/css" media="screen"> 
li {display:none;} .go {color:green;display:block} 
</style> 

<ul> 
<li>First Slide</li> 
<li>Second Slide</li> 
<li>Third Slide</li> 
<li>Fourth Slide</li> 
<li>Fifth Slide</li> 
<li>Sixth Slide</li> 
</ul> 

<a href="#" class="go-button">GO!</a> 


    <script type="text/javascript" charset="utf-8"> 

$(".go-button").click(function() { 

    $("li:nth-of-type(1)").addClass("go"); 

    var index = 0; 
    var length = $("ul").children().length; 
    var delays = [ 
      1000, 
      1500, 
      2000, 
      2500, 
      3000, 
      15000 

    ]; 

    function delayNext() 
    { 
     setTimeout(function() { 
     $("ul li:eq(" + index + ")").addClass("go").siblings().removeClass("go"); 
      index++; 

      if (index == length) 
       index = 0; 

      delayNext(); 
     }, delays[index]); 
    } 

    delayNext(); 
}); 
</script> 

回答

0

this ...不是一個很好的解決方案,雖然,但它確實你打算做什麼?在你的Click事件代碼

問題您正在將go類添加到第一個孩子,即第一張幻燈片setTimeout您再次分配了類go第一張幻燈片:eq選擇遵循零基於索引所以你的時間達到5滑動您的計數器設置爲15000毫秒,即delayNext()再次

+0

叫@ 3nigma後的時間 - 這似乎不工作它仍然在做同樣的事情。如果您點擊jfiddle結果面板上的go鏈接,您會看到最後一次延遲值應用於倒數第二個列表項,而不是最後一個列表項。 http://jsfiddle.net/YyDjW/16/ –

+0

15000毫秒後它顯示**第六張幻燈片** ?? – Rafay

+0

@ 3nigma - 對不起,我感謝你的努力 - 我的意思是,我需要第六張幻燈片持續15秒 –