Question

我正在制作带有5个按钮的图像幻灯片（开始，停止，暂停，向后，向前）我的开始按钮加载了一个自动运行功能，该功能开始播放图像，而向后/向前按钮跳过/回去一个图像。我想知道如何在点击暂停按钮时暂停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>
  <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);
}

暂停功能＆＃34; onClick＆＃34;

1 个答案: