我有这个javascript幻灯片,它可以正常使用暂停/播放选项:
<html>
<head>
<title>Simple Javascript Slideshow</title>
<script type="text/javascript">
var i = 0, imgsrc = new Array(), preload = new Array();
imgsrc[0]="photos/image1.png";
imgsrc[1]="photos/image2.png";
imgsrc[2]="photos/image3.png";
for (var j=0;j<imgsrc.length;j++)
{
preload[j] = new Image;
preload[j].src = imgsrc[j];
}
function mode(param)
{
smode=param;
}
function startSlideshow()
{
if(smode=="play")
{
document.getElementById("play").disabled="disabled";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("slideshow").src=imgsrc[i];
i++;
setTimeout("startSlideshow()",1000);
}
else if(smode=="pause")
{
document.getElementById("pause").disabled="disabled";
document.getElementById("play").disabled="";
document.getElementById("play").value="Resume";
}
else if(smode=="stop")
{
document.getElementById("play").disabled="";
document.getElementById("play").value="Play";
document.getElementById("pause").disabled="disabled";
document.getElementById("stop").disabled="disabled";
document.getElementById("slideshow").src=imgsrc[0];
i=0;
}
if(i==imgsrc.length)
{
i=0;
}
}
</script>
</head>
<body>
<img id="slideshow" src="photos/Aanimation-ir001.png" />
<br />
<input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();" />
<input id="pause" type="button" value="Pause" disabled="disabled"
onclick="mode('pause');startSlideshow();" />
<input id="stop" type="button" value="Stop" disabled="disabled"
onclick="mode('stop');startSlideshow();" />
</body>
</html>
有一个倒带/前进(下一个/上一个图像)选项与pause-option一起使用会很棒。
这可能吗?
亲切的问候
答案 0 :(得分:0)
你应该能够用你当前的代码搞清楚。
以下是一些提示:
当前显示的图像由以下内容定义:
document.getElementById("slideshow").src=imgsrc[i];
如果当前显示的图像具有索引i
,则下一个图像具有哪个索引?前一个怎么样?
解决了这个问题后,您必须将新功能(或现有功能的新案例)绑定到HTML标记,就像您在此处所做的那样:
<input id="next" type="button" value="Next" onclick="mode('next');" />
作为旁注,如果您要显示最后一张(或第一张)图像并按下一张(或上一张),您应该注意会发生什么。
希望有所帮助。
答案 1 :(得分:0)
想想我现在明白了:
这是我为前锋选择所得到的:
if(smode=="next")
{
document.getElementById("play").disabled="";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("next").disabled="";
document.getElementById("slideshow").src=imgsrc[i++];
}
随着落后:
if(smode=="pre")
{
document.getElementById("play").disabled="";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("next").disabled="";
document.getElementById("slideshow").src=imgsrc[i--];
}
为了避免从0到-1,-2等等我得到了这个:
如果(ⅰ== - 1) {
i = 23;
}
但是:当我向后按时,它会在第一次点击时向前移动,然后在第二次点击时向后移动?
此致