使用返回/停止功能点击



目前接近完成幻灯片使用html和JavaScript。我的最后一个问题是创建停止按钮,需要使用返回函数(我假设)或某种退出函数。它是一个自动运行的图像幻灯片,可以暂停,跳过图像,返回图像等。我希望停止按钮杀死autoRun函数并将图像设置回第一个默认图像。我已经建立了一个功能,我猜是完全错误的,因为它不工作。

HTML

  <td class="controls">
  <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="Exit();">Exit</button>

  </td>
</tr>

所有按钮都在工作,除了最后一个

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() {
interval = setInterval("changeImage(1)", 2000);
}
function pause(){
clearInterval(interval);
interval = null;
}
function Exit(){
return;
}

我不完全理解Exit函数中的return语句,因为我看过的大多数例子都是在满足'if'语句时运行函数,而我希望我的函数在单击Stop按钮时执行。由于

return语句只是退出它出现的函数,它不会导致其他事情停止。所以这:

function Exit(){
return;
}

…与下面的效果相同:

function Exit() { }

也就是说,函数不做任何事情。

我希望停止按钮杀死autoRun函数,并将图像设置为第一个默认图像

好的,让Exit()函数调用其他函数:

function Exit() {
  pause();            // this will stop the slideshow
  imageNumber = 0;    // reset to the first image
  changeImage(0);     // change to that image
}

相关内容

  • 没有找到相关文章

最新更新