Question

有关信息，我是编码的初学者。： - ）我使用W3Schools的代码https://www.w3schools.com/howto/howto_js_slideshow.asp来放置我的旋转木马。

我在5秒后添加到基本幻灯片（带箭头next / prev）自动转换，但是当我点击prev或next时，它会在自动转换效果上添加转换效果。它看起来像一个夜总会派对。

我不知道如何通过动作（点击）一次执行效果。下面是我使用的修改过的JS。

＆＃13;

var slideIndex = 0;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 5000); // Change image every 2 seconds
}

＆＃13;

<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://placeimg.com/75/50/animals" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="https://placeimg.com/75/50/animals" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="https://placeimg.com/75/50/animals" style="width:100%">
  <div class="text">Caption Three</div>
</div>

＆＃13;

你知道吗？非常感谢！

朱利

Answer 1

问题是您已将setTimeout(showSlides, 5000);添加到showSlides函数调用中，因此它会在每次点击时创建另一个setTimeout调用，使它们看起来更快。如果函数在完成之前被调用（例如在下一个幻灯片按钮上发生单击时），则需要删除旧的超时。根据我假设的这个例子，我忽略了你可以为自己想出的点。

我只显示我更改的行以使其正常工作：

function plusSlides(n) {
  // remove the slideIndex += n as showSlides automatically updates slideIndex
  showSlides();
}

var slideTimer = null;

showSlides() {
  // clear the timer so it doesn't fire too many times
  if (slideTimer !== null) {
    cancelTimeout(slideTimer);
    slideTimer = null;
  }

  /* rest of your code */

  slideTimer = setTimeout(showSlides, 5000); // Change image every 5 seconds
}

一旦你弄清楚这个实现是如何工作的，我建议你不要把幻灯片索引保存为JS中的变量，而是检查哪个是当前活动的幻灯片。

轮播转换 - 自动+上一个/下一个 - 附加效果

1 个答案: