I have this javascript slideshow which is working fine with the pause/play option:
<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>
It would be great to have a rewind/forward (next/previous image) option to use with the pause-option.
Is that possible?
Kind Regards
You should be able to figure it out with your current code.
Here are some hints :
The image currently displayed is defined by this :
If the currently displayed image has index
i, what index does the next one have ? What about the previous one ?Once you have solved this, you must bind your new function (or new case of your existing function) to your HTML markup, like you have done here :
As a side note, you should pay attention to what happens if you're displaying the last (or first) image and press next (or previous).
Hope that helps.