Javascript 幻灯片 - 添加 next/forward 和 previous/rewind

Question

我有这个 javascript 幻灯片，它在 pause/play 选项下工作正常：

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

有一个 rewind/forward（next/previous 图片）选项与暂停选项一起使用会很棒。

这可能吗？

亲切的问候

Answer 1

你应该能够用你现在的代码弄明白。

这里有一些提示：

当前显示的图片是这样定义的：

document.getElementById("slideshow").src=imgsrc[i];

如果当前显示的图片有索引i，下一张有什么索引？上一个呢？

一旦你解决了这个问题，你必须将你的新函数（或现有函数的新案例）绑定到你的 HTML 标记，就像你在这里所做的那样：

<input id="next" type="button" value="Next" onclick="mode('next');" />

作为旁注，您应该注意如果显示最后一张（或第一张）图像并按下一张（或上一张）会发生什么。

希望对您有所帮助。

Answer 2

我想我现在明白了：

这是我得到的转发选项：

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） {

我= 23;

}

但是：当我向后按时，它会在第一次点击时前进，然后在第二次点击时后退？

此致

Javascript 幻灯片 - 添加 next/forward 和 previous/rewind

Javascript slideshow - Add next/forward and previous/rewind

javascript

slideshow

playback

rewind

pause