單擊按鈕時如何停止autoslide？

Question

我有一個包含4張幻燈片的autoslide。我想知道如何在單擊滑塊內的導航按鈕時停止autoslide。或者更好的是知道點擊了哪個按鈕，然後使幻燈片繼續添加到其他幻燈片中。 在我的代碼中，無論我點擊導航按鈕還是不按順序繼續滑動。

/* *** Slide Starts *** */ 
 

 
/* To show first slide */ 
 
var slides = document.getElementsByClassName("showSlide"); 
 
for (i = 0; i < slides.length; i++) 
 
    slides[i].style.display = "none"; 
 
slides[0].style.display = "block"; 
 
/* Specific slide */ 
 
function showDisappear(n) { 
 
    var i; 
 
    for (i = 0; i < slides.length; i++) { 
 
    slides[i].style.display = "none"; 
 
    } 
 
    slides[n].style.display = "block"; 
 
} 
 
/* Auto Slide */ 
 
var i, k = 0; 
 
var navLinks = document.getElementsByClassName("itemLinks"); 
 
autoSlide(); 
 

 
function autoSlide() { 
 
    for (i = 0; i < slides.length; i++) { 
 
    slides[i].style.display = "none"; 
 
    navLinks[i].classList.remove("active"); 
 
    } 
 
    slides[k].style.display = "block"; 
 
    navLinks[k].className += " active"; 
 
    if (k == slides.length - 1) { 
 
    k = 0; 
 
    } else { 
 
    k++; 
 
    } 
 
    setTimeout(autoSlide, 5000); 
 
} 
 

 
/* *** Slide Finish *** */

<div class="slidercontainer clear"> 
 
    <div class="showSlide"> 
 
    <img class="slideImg" src="http://cdn.wallpapersafari.com/53/22/facp4d.jpg" /> 
 
    <span class="slideContent"> 
 
      \t <h1>Selcen 1</h1> 
 
      \t <p>Lorem ipsum dolor sit amet</p> 
 
      </span> 
 
    </div> 
 
    <div class="showSlide"> 
 
    <img class="slideImg" src="http://tremendouswallpapers.com/wp-content/uploads/2015/01/Fire-Ice-Fist-1280x720.jpg" /> 
 
    <span class="slideContent"> 
 
      \t <h1>Selcen 2</h1> 
 
      \t <p>Lorem ipsum dolor sit amet</p> 
 
      </span> 
 
    </div> 
 
    <div class="showSlide"> 
 
    <img class="slideImg" src="https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-022.jpg" /> 
 
    <span class="slideContent"> 
 
      \t <h1>Selcen 3</h1> 
 
      \t <p>Lorem ipsum dolor sit amet</p> 
 
      </span> 
 
    </div> 
 
    <div class="showSlide"> 
 
    <img class="slideImg" src="http://yeemei.mobile9.com/download/media/534/assassinsc_P1F5HimQ.jpg" /> 
 
    <span class="slideContent"> 
 
      \t <h1>Selcen 4</h1> 
 
      \t <p>Lorem ipsum dolor sit amet</p> 
 
      </span> 
 
    </div> 
 
    <div id="navLinks"> 
 
    <ul> 
 
     <li class="itemLinks" onclick="showDisappear(0)"></li> 
 
     <li class="itemLinks" onclick="showDisappear(1)"></li> 
 
     <li class="itemLinks" onclick="showDisappear(2)"></li> 
 
     <li class="itemLinks" onclick="showDisappear(3)"></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

/* *** Slide Starts *** */ 
 

 
/* To show first slide */ 
 
var slides = document.getElementsByClassName("showSlide"); 
 
var button = document.getElementById("btn"); 
 
var AUTO_TIMER = ''; 
 
for (i = 0; i < slides.length; i++) 
 
    slides[i].style.display = "none"; 
 
slides[0].style.display = "block"; 
 
/* Specific slide */ 
 
function showDisappear(n) { 
 
    var i; 
 
    for (i = 0; i < slides.length; i++) { 
 
    slides[i].style.display = "none"; 
 
    } 
 
    slides[n].style.display = "block"; 
 
} 
 
/* Auto Slide */ 
 
var i, k = 0; 
 
var navLinks = document.getElementsByClassName("itemLinks"); 
 
autoSlide(); 
 

 
function autoSlide() { 
 
    for (i = 0; i < slides.length; i++) { 
 
    slides[i].style.display = "none"; 
 
    navLinks[i].classList.remove("active"); 
 
    } 
 
    slides[k].style.display = "block"; 
 
    navLinks[k].className += " active"; 
 
    if (k == slides.length - 1) { 
 
    k = 0; 
 
    } else { 
 
    k++; 
 
    } 
 
    AUTO_TIMER = setTimeout(autoSlide, 5000); 
 
} 
 
button.addEventListener('click',()=>{ 
 
    clearTimeout(AUTO_TIMER); 
 
}); 
 
/* *** Slide Finish *** */

<div class="slidercontainer clear"> 
 
    <div class="showSlide"> 
 
    <img class="slideImg" src="http://cdn.wallpapersafari.com/53/22/facp4d.jpg" /> 
 
    <span class="slideContent"> 
 
      \t <h1>Selcen 1</h1> 
 
      \t <p>Lorem ipsum dolor sit amet</p> 
 
      </span> 
 
    </div> 
 
    <div class="showSlide"> 
 
    <img class="slideImg" src="http://tremendouswallpapers.com/wp-content/uploads/2015/01/Fire-Ice-Fist-1280x720.jpg" /> 
 
    <span class="slideContent"> 
 
      \t <h1>Selcen 2</h1> 
 
      \t <p>Lorem ipsum dolor sit amet</p> 
 
      </span> 
 
    </div> 
 
    <div class="showSlide"> 
 
    <img class="slideImg" src="https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-022.jpg" /> 
 
    <span class="slideContent"> 
 
      \t <h1>Selcen 3</h1> 
 
      \t <p>Lorem ipsum dolor sit amet</p> 
 
      </span> 
 
    </div> 
 
    <div class="showSlide"> 
 
    <img class="slideImg" src="http://yeemei.mobile9.com/download/media/534/assassinsc_P1F5HimQ.jpg" /> 
 
    <span class="slideContent"> 
 
      \t <h1>Selcen 4</h1> 
 
      \t <p>Lorem ipsum dolor sit amet</p> 
 
      </span> 
 
    </div> 
 
    <div id="navLinks"> 
 
    <ul> 
 
     <li class="itemLinks" onclick="showDisappear(0)"></li> 
 
     <li class="itemLinks" onclick="showDisappear(1)"></li> 
 
     <li class="itemLinks" onclick="showDisappear(2)"></li> 
 
     <li class="itemLinks" onclick="showDisappear(3)"></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<button id="btn">button</button>

AUTO_TIMER = setTimeout(autoSlide, 5000);

當點擊按鈕，

button.addEventListener('click',()=>{ 
    clearTimeout(AUTO_TIMER); 
});