如何在按下 next/back 按钮时重置幻灯片的自动功能？

Question

我有一张图片幻灯片，它每 4 秒自动更改一次（autoslide()），所以当我按下其中一个 next/back 按钮时，倒计时会继续。

我想要的行为方式：按下 next/back 按钮之一时，自动滑动功能倒计时从 0 秒开始，而不继续之前的倒计时。

var index = 1;

function plusindex(n) {
  showimage(index += n);
}

showimage(index);

function showimage(n) {
  var slide = document.getElementsByClassName('sliders');

  if (n > slide.length) {
    index = 1
  };
  if (n < 1) {
    index = slide.length
  };
  for (i = 0; i < slide.length; i++) {
    slide[i].style.display = "none";
  }
  slide[index - 1].style.display = "block";

}

var time = 4000;
autoslide()

function autoslide() {
  var slide = document.getElementsByClassName('sliders');
  for (i = 0; i < slide.length; i++) {
    slide[i].style.display = "none";
  }
  if (index > slide.length) {
    index = 1
  };
  slide[index - 1].style.display = "block";
  index++;
  setTimeout(autoslide, time);
}

<button class="btn" id="btn1" onclick="plusindex(-1)">&#10094</button>
<button class="btn" id="btn2" onclick="plusindex(1)">&#10095</button>

Answer 1

您可以使用 clearTimeout 执行此操作。你函数autoslide修改如下：

var timer;
function autoslide() {
  var slide = document.getElementsByClassName('sliders');
  for (i = 0; i < slide.length; i++) {
    slide[i].style.display = "none";
  }
  if (index > slide.length) {
    index = 1
  };
  slide[index - 1].style.display = "block";
  index++;
  timer = setTimeout(autoslide, time);
}

此处 timer 跟踪您的下一次预定滑动。因此，您可以使用它来重置计时器：

function plusindex(n){
  showimage(index +=n);
  clearTimeout(timer);
  timer = setTimeout(autoslide,time);
}

如何在按下 next/back 按钮时重置幻灯片的自动功能？

How to reset an automatically function of a slideshow when next/back button is pressed?

html

javascript

slideshow