暫停javascript圖像滑塊

Question

您好我已經建立了一個圖像滑塊與導航箭頭使用HTML和JavaScript。我需要一個暫停按鈕來停止幻燈片放映，因爲它每5秒旋轉一次圖像。誰能幫我

<script> 
 

 
\t var index = 1; 
 

 
\t function plusIndex(n){ 
 
\t \t index = index + 1; 
 
\t \t showImage(index); 
 
\t } 
 

 
\t showImage(1); 
 

 
\t function showImage(n){ 
 
\t \t var i; 
 
\t \t var x = document.getElementsByClassName("slides"); 
 
\t \t if(n > x.length){ index = 1}; 
 
\t \t if(n < 1){ index = x.length}; 
 
\t \t for(i=0;i<x.length;i++) 
 
\t \t \t { 
 
\t \t \t \t x[i].style.display = "none"; 
 
\t \t \t } 
 
\t \t x[index-1].style.display = "block"; 
 
\t } 
 
\t autoSlide(); 
 
\t function autoSlide(){ 
 
\t \t var i; 
 
\t \t var x = document.getElementsByClassName("slides"); 
 
\t \t for(i=0;i<x.length;i++) 
 
\t \t \t { 
 
\t \t \t \t x[i].style.display = "none"; 
 
\t \t \t } 
 
\t \t if(index > x.length){ index = 1} 
 
\t \t x[index-1].style.display = "block"; 
 
\t \t index++; 
 
\t \t setTimeout(autoSlide,5000); 
 
\t } 
 

 
</script>

<div id="container_slides"> 
 
\t <img class="slides"src="IMG EXAMPLE"/> 
 
\t <img class="slides"src="IMG EXAMPLE"/> 
 
\t <img class="slides"src="IMG EXAMPLE"/> 
 
\t <img class="slides"src="IMG EXAMPLE"/> 
 
\t <img class="slides"src="IMG EXAMPLE"/> 
 

 
\t <button class="btn" onclick="plusIndex(-1)" id="btn1">&#10094;</button> 
 
\t <button class="btn" onclick="plusIndex(1)"id="btn2">&#10095;</button> 
 
\t 
 
</div>

呢？

Answer 1

您需要爲此使用clearTimeout()。所以，你指定計時器到一個全局變量（因爲它應該是可訪問的交叉功能），然後：

var a = 0; // Global 

a = setTimeout(autoSlide, 5000); // Replace this line. 

，並創建一個功能：

function stop() { 
    clearTimeout(a); 
} 

將它添加到一個按鈕：

<button class="btn" onclick="stop();">Stop</button> 

全部摘錄

var index = 1; 
 
var a = 0; 
 

 
function plusIndex(n) { 
 
    index = index + 1; 
 
    showImage(index); 
 
} 
 

 
showImage(1); 
 

 
function showImage(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("slides"); 
 
    if (n > x.length) { 
 
    index = 1 
 
    }; 
 
    if (n < 1) { 
 
    index = x.length 
 
    }; 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[index - 1].style.display = "block"; 
 
} 
 
autoSlide(); 
 

 
function autoSlide() { 
 
    var i; 
 
    var x = document.getElementsByClassName("slides"); 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    if (index > x.length) { 
 
    index = 1 
 
    } 
 
    x[index - 1].style.display = "block"; 
 
    index++; 
 
    a = setTimeout(autoSlide, 5000); 
 
} 
 

 
function stop() { 
 
    clearTimeout(a); 
 
}

<div id="container_slides"> 
 
    <img class="slides" src="//placehold.it/100?text=1" /> 
 
    <img class="slides" src="//placehold.it/100?text=2" /> 
 
    <img class="slides" src="//placehold.it/100?text=3" /> 
 
    <img class="slides" src="//placehold.it/100?text=4" /> 
 
    <img class="slides" src="//placehold.it/100?text=5" /> 
 

 
    <button class="btn" onclick="plusIndex(-1)" id="btn1">&#10094;</button> 
 
    <button class="btn" onclick="plusIndex(1)" id="btn2">&#10095;</button> 
 
    <button class="btn" onclick="stop();">Stop</button> 
 
</div>

演示：http://output.jsbin.com/guyanifogu

Answer 2

現在，您可以暫停，並用單一的點擊取消暫停。用於檢查滑塊是否處於暫停狀態的附加變量，如果它設置爲true，則防止執行setTimeout。並且爲了確保該圖像在暫停時不會改變，在功能showImage和autoSlide開頭處的好聲明if應該有所幫助。

var index = 1; 
 
var timeout = null; 
 
var paused = false; 
 

 
function plusIndex(n) { 
 
    index++; 
 
    showImage(index); 
 
} 
 

 
function stopSlider(event) { 
 
    paused = !paused; 
 
    event.innerHTML = paused ? "Start" : "Stop"; 
 
    paused ? clearTimeout(timeout) : timeout = setTimeout(autoSlide, 5000); 
 
} 
 

 
showImage(1); 
 

 
function showImage(n) { 
 
    if (paused) return; 
 
    var i; 
 
    var x = document.getElementsByClassName("slides"); 
 
    if (n > x.length) { 
 
    index = 1 
 
    }; 
 
    if (n < 1) { 
 
    index = x.length 
 
    }; 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[index - 1].style.display = "block"; 
 
} 
 
autoSlide(); 
 

 
function autoSlide() { 
 
    if (paused) return; 
 
    showImage(index); 
 
    index++; 
 
    timeout = setTimeout(autoSlide, 5000); 
 
}

<div id="container_slides"> 
 
    <img class="slides" src="IMG EXAMPLE" alt="IMG 1" /> 
 
    <img class="slides" src="IMG EXAMPLE" alt="IMG 2" /> 
 
    <img class="slides" src="IMG EXAMPLE" alt="IMG 3" /> 
 
    <img class="slides" src="IMG EXAMPLE" alt="IMG 4" /> 
 
    <img class="slides" src="IMG EXAMPLE" alt="IMG 5" /> 
 

 
    <button class="btn" onclick="plusIndex(-1)" id="btn1">&#10094;</button> 
 
    <button class="btn" onclick="stopSlider(event.target)" id="btn3">Stop</button> 
 
    <button class="btn" onclick="plusIndex(1)" id="btn2">&#10095;</button> 
 

 
</div>