停止自动运行功能，直到单击“开始”按钮

Question

早些时候，我为我的图像幻灯片放映创建了一个暂停按钮，在此方面我得到了一些帮助，而且似乎在一定程度上可以正常工作。

单击“开始”按钮时，幻灯片将自动运行。 直到我玩弄代码以使暂停按钮起作用之前，这种方法一直很好。 现在，自动运行功能在页面加载时启动。 有没有一种方法可以阻止这种情况的发生，并且让它仅在单击“开始”按钮时才开始？ 干杯

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>

的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 interval = setInterval("changeImage(1)", 2000);
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);

}

function pause(){
clearInterval(interval);
}

Answer 1

请删除以下代码行，让我知道是否有帮助var interval = setInterval（“ changeImage（1）”，2000）;

Answer 2

将interval声明为变量，在autoRun定义interval

 <button onClick="autoRun()">Start</button> <button onClick="pause(); changeImage(-1); autoRun();">Previous Image</button> <button onClick="pause();">pause</button> <button onClick="pause(); changeImage(1); autoRun();">Next Image</button> <script> 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 interval; // = setInterval("changeImage(1)", 2000); 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 = console.log(images[imageNumber]); return false; } function autoRun() { interval = setInterval("changeImage(1)", 2000); } function pause() { clearInterval(interval); interval = null; } </script>