Question

我有一个幻灯片显示（出于测试目的）每1秒钟滑动一次。当它回到第一张图片时，我要停止它。但是，当它停在上面并单击下一个按钮时，什么也没有发生。当我弄乱它时，它将再次开始滑动。

我尝试了while语句，但事实就是如此。

我的代码：

var i = 0;
var images = [];
var time = 1000;

images[0] = 'michael-baird-14942-unsplash.jpg';
images[1] = 'kees-streefkerk-352781-unsplash.jpg';
images[2] = 'hakon-sataoen-1484216-unsplash.jpg';
images[3] = 'mario-silva-1492028-unsplash.jpg';
images[4] = 'will-turner-1474611-unsplash.jpg';

function changeImg() {
  document.slide.src = images[i];

  if (i < images.length) {
    i++;
  } else if (i > 4) {
    document.slide.src = images[0];
  } else {
    i = 0;
  }

  if (i == 0) {
    $('.next').on('click', function() {
      i++;
    });
  }

  setTimeout("changeImg()", time);
}
window.onload = changeImg;

.slideshow {
  width: 100%;
  height: 75%;
  position: absolute;
  top: 42px;
}

.slideshow img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div class="slideshow">
  <img name="slide" alt="Slideshow Images" width="100%" height="100%">
  <a class="next">&#10095;</a>
  <a class="prev">&#10094;</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="masterjs.js" charset="utf-8"></script>

正如您在JavaScript中所看到的，它贯穿并停在第一张图片上。但是，正如您还可以看到的那样，这不是一个很好的方法。如果你们可以，您可以尝试将其保留在JavaScript / jQuery中吗？如果没有，或者有更好的方法，请发布。但是基本上是因为它是这样的，它在开始时在停止处循环并停留，但是如果您通过下一个按钮弄乱它，它将导致它重新启动。我基本上希望它在图像之间循环，然后在开始时停止，从而允许用户自己在图像之间循环。另外，我想在图像之间添加动画，这就是为什么我要求其他可能也更好的方法的原因。

Answer 1

问题出在这种情况下：

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

您的图像更新为images数组的第一个元素，并且您的计数器停止递增。在跟踪i的值的同时，尝试仔细地运行代码。一旦满足此条件，它会停止满足吗？

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

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

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

此外，您应该考虑使用array.push()添加到images数组中。

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

Answer 2

请参阅下面的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>

如何停止幻灯片播放？怎样才能改进代码？

2 个答案: