目前接近完成幻灯片使用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>
所有按钮都在工作,除了最后一个
JavaScriptvar 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
}