-1

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

droid
  • 103
  • 1
  • 15

2 Answers2

0

You should be able to figure it out with your current code.

Here are some hints :

The image currently displayed is defined by this :

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

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 :

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

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.

Komo
  • 2,043
  • 1
  • 22
  • 35
0

Think I got it now:

This is what I got for the forward-option:

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++];

}

And with the backward:

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

    }

And to avoid going from 0 to -1, -2 and so on I got this:

if(i==-1) {

i= 23;

}

BUT: When I press backwards it goes forward on the first click and then go backward on the second click?

Regards

droid
  • 103
  • 1
  • 15
  • Please don't post an answer, edit your initial post if you need to post code. I don't understand `i = 23`, do you mean `2` ? – Komo Mar 16 '16 at 09:38
  • Because if it press the rewind it will at sometime go to -1 and that is no good so I want it instead to go to the last image and that is image 23. – droid Mar 16 '16 at 16:05
  • I don't really get what's wrong, but you I suggest a simple `i = i + 1` and `i = i - 1` instead of `i++` and `i--` because `i++` for instance will return i and **then** increment the i variable. That's not what you want. – Komo Mar 16 '16 at 16:18
  • I mean put it on a separate line : i = i + 1; document.getElementById("slideshow").src=imgsrc[i]; – Komo Mar 16 '16 at 16:28
  • On 'next' button click : 1) Increment i : `i = i + 1` 2) Check if i > imgsrc.length : if true, set i to 0 3) document.getElementById("slideshow").src=imgsrc[i]; – Komo Mar 16 '16 at 16:38
  • Thank you, kind of you :) I will have a look at it, I'm learning, slow :-) – droid Mar 16 '16 at 16:43
  • Its working but I still have to press the button twice before it will go forward. Where can I post my code? Delete all the previous code? – droid Mar 16 '16 at 16:52
  • Glad it worked out. If you feel my answer solved the problem, please mark it as 'accepted' by clicking the green check mark :) – Komo Mar 17 '16 at 09:32
  • Done. Have a nice day :) – droid Mar 17 '16 at 19:36