停止autoRun功能，直到单击"start“按钮

Question

我之前得到了一些帮助，为我的图像幻灯片创建了一个暂停按钮，它似乎在某种程度上起作用了。

当点击“开始”按钮时，幻灯片就会自动运行。在我尝试使用代码让暂停按钮工作之前，它一直工作得很好。现在，autoRun函数在页面加载时启动。有没有办法阻止这种情况发生，并让它在我单击开始按钮时启动？干杯

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>

​