Javascript 如何停止幻灯片放映？我可以用什么方法来改进代码？

我有一个幻灯片，用于测试目的，每1秒滑动一次。当它返回到第一张图像时，我必须停止它。但当它停下来，我点击下一步按钮时，什么也没发生。当我把它弄得一团糟的时候，它又会开始刷过去

我试过while语句，但实际上就是这样

我的代码：

var i=0； var图像=[]； var时间=1000； 图片[0]=“michael-baird-14942-unsplash.jpg”； 图片[1]=“kees-streefkerk-352781-unsplash.jpg”； 图片[2]=“hakon-satoen-1484216-unsplash.jpg”； 图片[3]=“mario-silva-149228-unsplash.jpg”； 图片[4]=“will-turner-1474611-unsplash.jpg”； 功能改变{ document.slide.src=图像[i]； 如果我4{ document.slide.src=图像[0]； }否则{ i=0； } 如果i==0{ $。下一步。单击，函数{ i++； }; } setTimeoutchangeImg，时间； } window.onload=changeImg； .幻灯片放映{ 宽度：100%； 身高：75%； 位置：绝对位置； 顶部：42px； } .幻灯片{ 对象匹配：覆盖； 宽度：100%； 身高：100%； }

---

问题在于这种情况：

else if (i > 4) {
    document.slide.src = images[0];
  }

图像更新到图像数组的第一个元素，并且计数器停止递增。试着在心里运行代码，同时跟踪i的值。一旦满足了这个条件，它是否会停止满足

解决方案很简单，重置图像时只需重置i的值：

else if (i > 4) {
    document.slide.src = images[0];
    i = 0;
  }

然后，您可能会遇到事件侦听器的问题，因为它在i==0时触发，因此在如上所述重置i时将被触发。使用i==0有一些很好的理由，我建议您研究一下

此外，您应该考虑使用ARARY.PUTO来添加到图像数组。

---

最后，我还建议使用console.log作为跟踪代码实际执行情况的一种方法，这将有助于调试过程。

请参阅下面的javascript代码

<script type="text/javascript">
  var i = 0;
  var firstSlide = 0;
  var images = [];
  var time = 1000;
  images[0] = 'https://i.ytimg.com/vi/SiVr9DM_EG0/maxresdefault.jpg';
  images[1] = 'https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png';
  images[2] = 'https://files.brightside.me/files/news/part_41/419860/18057510-1549810-23-0-1513767199-1513767212-650-1-1513767212-650-ce9f862cd3-1513864405.jpg';
  images[3] = 'http://ichef.bbci.co.uk/news/999/mcs/media/images/80286000/png/_80286528_penisvagina.png';
  images[4] = 'https://d345cba086ha3o.cloudfront.net/wp-content/uploads/2015/12/Chota-Bheem-Aur-Krishna-Drawing-e1451484119715.jpg';

  function changeImg() {
    if (i <= images.length && firstSlide == 0) {
      document.slide.src = images[i];
      if (i < images.length) {
        i++;
      } else if (i > 4) {
        document.slide.src = images[0];
      } else {
        i = 0;
      }
      setTimeout("changeImg()", time);
    }
  }

  $('.next').on('click', function() {
    firstSlide = 1;
    i++;
    var ind = (i % 5);
    document.slide.src = images[ind];
  });

  $('.prev').on('click', function() {
    firstSlide = 1;
    i--;
    var ind = (i % 5);
    document.slide.src = images[ind];
  });
  window.onload = changeImg;
</script>

---

i++本身除了增加i之外什么都不做，你也应该更新src。请一次问一个问题，在图像之间添加动画是另一个问题。Idk如何用“下一步”按钮更新src。我希望它能够改变图像与下一步按钮，而不重新启动，因为如果语句，它会导致它重新启动非常感谢！这是我想要的方式，它工作得非常完美！