setInterval：通過按鈕點擊改變延遲時的毛刺

我正在實現一個使用純JavaScript的圖像幻燈片，所以我只需要一個JavaScript解決方案。setInterval：通過按鈕點擊改變延遲時的毛刺

我有一組5個圖像，我隱藏並使用setInterval顯示圖像。

我有一個選擇列表，它用來改變圖像的變化率，即setInterval中的延遲。

我已經差不多實現了幻燈片，但是當我改變圖像的變化率時，我遇到了一個小問題，我無法找到一個解決方案來啓動頁面加載的幻燈片。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <style> 
    .item{ 
     width: 1024px; 
     height: auto; 
     display: none; 
    } 
    .active{ 
     width: 1024px; 
     height: auto; 
     display: block; 
    } 
    </style> 
</head> 
<body> 

    <select id="speedo"> 
     <option value="1">1 sec</option> 
     <option value="2">2 sec</option> 
     <option value="3">3 sec</option> 
     <option value="4">4 sec</option> 
     <option value="5">5 sec</option> 
    </select> 

    <div class="container"> 
     <img class="item" src="http://i58.tinypic.com/xp4isn.jpg" data-index='0'> 
     <img class="item" src="http://i59.tinypic.com/212u39z.jpg" data-index='1'> 
     <img class="item" src="http://i61.tinypic.com/63vbc2.jpg" data-index='2'> 
     <img class="item" src="http://i60.tinypic.com/wb2iaq.jpg" data-index='3'> 
     <img class="item" src="http://i60.tinypic.com/ejvqxe.jpg" data-index='4'> 
    </div> 

    <script> 
     var index=0; 
     var elemarray = document.querySelectorAll('.item'); 
     var speedElement = document.getElementById("speedo"); 
     window.delay = 1000; 

     speedElement.addEventListener('change',function(){ 
      if(timer) window.clearInterval(timer); 
      window.delay = parseInt(this.value)*1000; 
      var timer = setInterval("rotate()", window.delay); 
     }) 
     function rotate(){ 
      console.log(delay); 
      index++; 
      if(index==5) index = 0; 
      for(var i=0, len = elemarray.length; i<len; i++){ 
       (elemarray[i].getAttribute('data-index')==index)?elemarray[i].setAttribute('class','active') : elemarray[i].setAttribute('class','item'); 
      } 
     } 
    </script> 
</body> 
</html>

問題1.如何擺脫毛刺？
問題2.如何在頁面加載時啓動幻燈片放映？

來源

2014-05-03 anurag

你的「小故障」是什麼？請正確描述你的問題 – fjc

不要在字符串中使用'setTimeout'和'setInterval'，因爲它就像邪惡'eval'！使用函數：'setInterval（rotate，window.delay）' – Oriol

問題1）您需要初始化timer。你一遍又一遍地創建它。這就是你的小故障來自哪裏。

問題2）您需要開始您的間隔。

問題3）請勿在setInterval中使用字符串函數。

<select id="speedo"> 
    <option value="1" class="active">1 sec</option> 
    <option value="2">2 sec</option> 
    <option value="3">3 sec</option> 
    <option value="4">4 sec</option> 
    <option value="5">5 sec</option> 
</select> 

<div class="container"> 
    <img class="item" src="http://i58.tinypic.com/xp4isn.jpg" data-index='0'> 
    <img class="item" src="http://i59.tinypic.com/212u39z.jpg" data-index='1'> 
    <img class="item" src="http://i61.tinypic.com/63vbc2.jpg" data-index='2'> 
    <img class="item" src="http://i60.tinypic.com/wb2iaq.jpg" data-index='3'> 
    <img class="item" src="http://i60.tinypic.com/ejvqxe.jpg" data-index='4'> 
</div>

var timer = 0; 
var index = 0; 
var itemElements = document.querySelectorAll('.item'); 
var speedElement = document.getElementById("speedo"); 
var delay = 1000; 

speedElement.addEventListener('change',function() { 
    if(timer) { 
     window.clearInterval(timer); 
    } 
    delay = parseInt(this.value, 10) * 1000; 
    timer = setInterval(rotate, delay); 
}); 

function rotate() { 
    var len = itemElements.length; 
    index = (index + 1) % len; 
    for(var i=0; i<len; i++) { 
     if(itemElements[i].getAttribute('data-index') == index) { 
      itemElements[i].setAttribute('class','active'); 
     } else { 
      itemElements[i].setAttribute('class','item'); 
     } 
    } 
} 

timer = setInterval(rotate, delay);

的jsfiddle： http://jsfiddle.net/4RtRV/2

來源

2014-05-03 20:30:05 Syntax

我必須說，index =（index + 1）％6;非常聰明。謝謝回答！ – anurag

@anurag，沒問題。更新我的答案，使用項目元素長度而不是硬編碼值，也修復了基本索引（認爲它是1！） – Syntax

你的定時器變量是內監聽範圍內聲明的，你需要把它放在外面：

 var timer ; 
     speedElement.addEventListener('change',function(){ 
      changeTimer(this.value); 
     }) 
     changeTimer(1); 
     function changeTimer(val){ 
      if(timer) window.clearInterval(timer); 
      window.delay = parseInt(val)*1000; 
      timer = setInterval("rotate()", window.delay);   
     }

來源

2014-05-03 20:30:07 juvian

謝謝，那正是我的錯誤，我在外面宣佈了計時器，並且瞧...它工作正常！！乾杯 – anurag

setInterval：通過按鈕點擊改變延遲時的毛刺

回答

相關問題