Question

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

我的行为方式：当按下其中一个下一个/后退按钮时，自动滑动功能倒计时从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);
}

如何在按下下一个/后退按钮时重置幻灯片的自动功能？

1 个答案: