javascript - 如何在 setInterval() 方法后设置 "stop"？

Question

我有图片库 ant 我设置了 setinterval，现在我希望它应该在两个或树圈之后停止。

这是我的html代码:

<div id="slider">
  <img src="http://imgsrc.hubblesite.org/hu/gallery/db/spacecraft/24/formats/24_web.jpg">
    <img src="http://imgsrc.hubblesite.org/hu/gallery/db/spacecraft/27/formats/27_web.jpg">
  <img src="http://imgsrc.hubblesite.org/hu/gallery/db/spacecraft/32/formats/32_web.jpg">
    <img src="http://imgsrc.hubblesite.org/hu/gallery/db/spacecraft/33/formats/33_web.jpg">

</div>

CSS:

#slider {
  width: 400px;
  height: 300px;
  position: relative;
  overflow: hidden
}

#slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.25s
}

和Javascript:

var pics;
var current = 0; // first next() moves to pics[0], the first image

window.addEventListener("load", function() {
  pics = document.querySelectorAll("#slider img");
});

setInterval(function() {
  var nextImage = (current + 1) % pics.length;
   pics[current].style.opacity = 0;
  pics[nextImage].style.opacity = 1;
  current = nextImage;
}, 3000);

Answer 1

这是您的答案:Stop setInterval call in JavaScript

创建时保存间隔 ID，跟踪幻灯片旋转的次数，然后取消间隔。