用於Javascript幻燈片的暫停按鈕

我正在嘗試爲展示隨機圖像的無限循環的JavaScript幻燈片創建一個暫停按鈕。錯誤控制檯不會引發任何錯誤。幻燈片播放開始，但按鈕的值不會暫停（我一直在玩它，它曾經）。如果按兩次按鈕，幻燈片顯示速度會變得更快。答案可能在於一個明確的超時（t）;某處，但我似乎無法使其工作。下面是該腳本：用於Javascript幻燈片的暫停按鈕

<script type="text/javascript"> 
var t; 
function letsslide(){ 
    var switcha = document.getElementById("SlideShow"); 
    if (switcha.getAttribute("value").length == 9) { 
      switcha.setAttribute("value", "Pause"); 
      keeprollin(); 
    } 
    if (switcha.getAttribute("value").length == 5) { 
      t = "stopped"; 
      switcha.setAttribute("value", "Slideshow"); 
    } 
} 
function keeprollin(){ 
    var t = setTimeout("magic()", 2000); 
} 
function magic(){ 
    var dazp = Math.ceil(Math.random() * 35); 
    document.getElementById('bigpic').setAttribute("src", "images/" + dazp + ".jpg"); 
    keeprollin(); 
} 
</script>

下面是HTML：

<img src="images/9.jpg" id="bigpic" /> 
<input type="submit" id="SlideShow" value="Slideshow" onclick="letsslide()" />

謝謝！

來源

2011-04-16 Ishikawa

var t; 
function startSlideshow() { 
    t = setInterval(magic, 2000); 
} 
function letsslide(){ 
    var switcha = document.getElementById("SlideShow"); 
    if (switcha.getAttribute("value").length == 9) { 
      startSlideshow(); 
      switcha.setAttribute("value", "Pause"); 
    } 
    if (switcha.getAttribute("value").length == 5) { 
      clearTimeout(t); 
      switcha.value = "Slideshow"; 
    } 
} 
function magic(){ 
    var dazp = Math.ceil(Math.random() * 35); 
    document.getElementById('bigpic').setAttribute("src", "images/" + dazp + ".jpg"); 
}

可能是更多你想要的。

來源

2011-04-16 02:27:58 Ryan

現在幻燈片不會在所有的工作:( – Ishikawa 2011-04-16 02:33:53

好了，我現在已經改變了這個有很多 - 不更新的代碼工作更好地爲您 – Ryan 2011-04-16 02:40:09

不，它不工作，我嘗試調整一些東西，它仍然無法工作，我今晚已經夠了，非常感謝您的幫助:) – Ishikawa 2011-04-16 03:17:00

(function() { 
    var t; 

    function letsslide() { 
     var switcha = document.getElementById("SlideShow"); 
     if (switcha.value === "Slideshow") { 
      switcha.value = "Pause"; 
      t = setTimeout(magic, 2000); 
     } 
     if (switcha.value === "Pause") { 
      switcha.value = "Slideshow"; 
      clearTimeout(t); 
     } 
    } 

    window.letsslide = letsslide; 

    function magic() { 
     var dazp = Math.ceil(Math.random() * 35); 
     document.getElementById('bigpic').src = "images/" + dazp + ".jpg"; 
     t = setTimeout(magic, 2000); 
    } 

})();

重構，以便它的工作。添加了一個關閉，所以t不再是全球性的。

來源

2011-04-16 02:28:18 Raynos

的幾個問題：

首先，當你調用keeprollin()，它開始一個循環。循環去

keeprollin() 
magic() 
keeprollin() 
margin() 
...infinite

你永遠不會停止這條鏈，一旦開始。通過將var t設置爲setTimeout返回的值，但將t設置爲值「stopped」不會停止此週期，您有正確的想法。您需要使用clearTimeout(t)來停止循環。

其次，您的var t的範圍已關閉。在一個函數中，var t將把變量的作用域與函數關聯起來，該函數在任何其他函數中都不可訪問。如果刪除var行，則該值將與window綁定，並且t變量將在您引用它的任何位置正確設置。

三，不要使用字符串的長度來確定你想要做什麼，只是比較字符串。 switcha.getAttribute("value").length==9應該是switcha.getAttribute("value") == 'Slideshow'

四，不要將你的函數或變量命名爲怪異或有趣的名字。如果您在命名中是描述性的，那麼您將來可以節省自己和其他人的頭痛。它會讓你的代碼更容易閱讀。

...現在做咆哮:)

來源

2011-04-16 02:32:48

似乎還有另一個問題:(感謝您的建議;我會盡力讓更好的名字:) – Ishikawa 2011-04-16 03:17:41

用於Javascript幻燈片的暫停按鈕

回答

相關問題