停止自动运行功能，直到“启动”;按钮点击

Stop autoRun function until "start" button clicked

本文关键字：启动 按钮 直到 运行 功能      更新时间：2023-09-26

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

当点击"开始"按钮时，幻灯片自动运行。这工作得很好，直到我玩了代码，让暂停按钮工作。现在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);
}

请删除以下代码行，并让我知道这是否有帮助var interval = setInterval("changeImage(1)"， 2000);

声明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>

相关文章：