暂停功能“onClick”

Question

我目前正在制作带有 5 个按钮（开始、停止、暂停、后退、前进）的图像幻灯片 我的开始按钮加载了一个自动运行功能，该功能开始播放图像，而后退/前进按钮跳过/返回一个图像。我想知道单击暂停按钮时如何暂停自动运行功能？再次点击时不需要恢复，只需要在它所在的当前图像上暂停即可。停止功能（一旦我完成它）将结束功能并返回开始。干杯

HTML：

  <button onClick="autoRun()">Start</button>
  <button onClick="changeImage(-1); return false;">Previous Image</button>
  <button onClick="pause();">pause</button>
  <button onClick="changeImage(1); return false;">Next Image</button>
  <button onClick="stop();">Stop</button>



  </td>

JavaScript：

var images = ["HGal0.jpg", "HGal1.jpg", "HGal2.jpg", "HGal3.jpg", "HGal4.jpg", "HGal5.jpg", "HGal6.jpg", "HGal7.jpg", "HGal8.jpg", "HGal9.jpg", "HGal10.jpg", "HGal11.jpg", "HGal12.jpg", "HGal13.jpg", "HGal14.jpg", "HGal15.jpg"];

var imageNumber = 0;
var imageLength = images.length - 1;

function changeImage(x) {
imageNumber += x;
// if array has reached end, starts over
if (imageNumber > imageLength) {
    imageNumber = 0;
}
if (imageNumber < 0) {
    imageNumber = imageLength;
}

document.getElementById("slideshow").src = images[imageNumber];

return false;
}

function autoRun() {
setInterval("changeImage(1)", 2000);

}

Answer 1

在变量中设置间隔：

var interval = setInterval("changeImage(1)", 2000);

并用 clearInterval() 清除它：

function pause(){
  clearInterval(interval);
}