javascript - 单击按钮时如何停止自动滑动？

Question

我有一个包含 4 张幻灯片的自动幻灯片。我想知道如何在单击 slider 内的导航按钮时停止自动滑动。或者更好的方法是知道单击了哪个按钮，然后根据单击的幻灯片编号使幻灯片继续播放其他幻灯片。 在我的代码中，无论我是否点击导航按钮，幻灯片都会按顺序继续播放。

/* *** 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">
            	<h1>Selcen 1</h1>
            	<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">
            	<h1>Selcen 2</h1>
            	<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">
            	<h1>Selcen 3</h1>
            	<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">
            	<h1>Selcen 4</h1>
            	<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">
            	<h1>Selcen 1</h1>
            	<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">
            	<h1>Selcen 2</h1>
            	<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">
            	<h1>Selcen 3</h1>
            	<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">
            	<h1>Selcen 4</h1>
            	<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);
});