Question

我有一个包含4张幻灯片的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">
            	<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

netstat -lnt | grep 3000

/* *** 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);

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

1 个答案: