时间戳

首页 > 解决方案 > 如何在不停止的情况下运行 img 滑块？

javascript - 如何在不停止的情况下运行 img 滑块？

问题描述

我想制作一个 img 滑块，但它在到达终点后停止。为什么一转身就停下来？

当我运行此代码时，序列为1-2-3-4-5-6-1：

if ((n+1) > size) {
   n = 0;
}

如您所见，我将高数更改为零。然后n变为0。所以我认为n开始增加，直到5 再次。

我的代码： 

var n = 0;
var sec = 1000;

setInterval(function() {
  n++;
  showSlides(n);

}, sec);

function showSlides(n) {
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  var size = slides.length;

  if ((n + 1) > size) {
    n = 0;
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[n].style.display = "block";

}
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script defer src="main.js"></script>
</head>

<body>
  <div class="slideshow-container">
    <div class="mySlides fade">
      <div class="numbertext">1 / 6</div>
      <img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425456/ltekybkstiyl7faumrsq/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
      <div class="text">ACNE STUDIO</div>
    </div>
    <div class="mySlides fade">
      <div class="numbertext">2 / 6</div>
      <img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425435/hwxwxqxfwo4htfgqksbu/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
      <div class="text">ACNE STUDIO</div>
    </div>
    <div class="mySlides fade">
      <div class="numbertext">3 / 6</div>
      <img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425448/rnelglmoujifzlbzykxw/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
      <div class="text">ACNE STUDIO</div>
    </div>
    <div class="mySlides fade">
      <div class="numbertext">4 / 6</div>
      <img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425434/coct9kmra7uhmeu4cxto/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
      <div class="text">ACNE STUDIO</div>
    </div>
    <div class="mySlides fade">
      <div class="numbertext">5 / 6</div>
      <img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425440/xacfj7abitmifeyciiia/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
      <div class="text">ACNE STUDIO</div>
    </div>
    <div class="mySlides fade">
      <div class="numbertext">6 / 6</div>
      <img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425434/cqxjhpdmepxto0nudsok/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
      <div class="text">ACNE STUDIO</div>
    </div>
  </div>
</body>

</html>

标签： javascript

解决方案

让我们看看这里发生了什么：-

你有一个全局变量n，你也将它作为参数传递给showSlides它，它会在内部创建一个本地副本，showSlides因此更新它实际上不会改变 global n。

要么您根本不传递n给，showSlides因此您在函数内部更新的内容最终是全局的，或者您在将其传递给之前执行检查以在内部n重置。nsetIntervalshowSlides

推荐阅读