暂停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>