Java Script image slide show manual using my own images?

[trevorsaint]

I am trying to create a manual slide show using javascript, I have been so a few site looking for tutorials, and found an ideal choice at dynamic drive except it uses a form for the back and forth button, I require the use of images but not sure how to manipulate it to work accordingly.

I have 6 quote images and I want the user to move forward or backward, can anyone point me in the right direction?

[Marz]

Using these images... Do they need to be loaded in during the course of time or will they be clicking say, an image to progress the images?

I'm guessing the clicking factor... So... Here you go..

Place the following code in the :HEAD: area of your document.



<style>
.on {display: on}
.off {display: none}
</style>

<script language="JavaScript">

currentImage = 1
numImages = 4

function nextImage()
{

document.all.currentImage.className = "off"

if(currentImage > numImages)
{
currentImage = 1
}
else
{
currentImage++
}

document.all.currentImage.className = "on"
}

function prevImage()
{

document.all.currentImage.className = "off"

if(currentImage < 1)
{
currentImage = numImages
}
else
{
currentImage--
}

document.all.currentImage.className = "on"
}

</script>


And now.. In the :BODY: section of your site.. Just do this...



<center>
<DIV>
<span id="1" class="on"><img src="1.jpg"></span>
<span id="2" class="off"><img src="2.jpg"></span>
<span id="3" class="off"><img src="3.jpg"></span>
<span id="4" class="off"><img src="4.jpg"></span>
</DIV>
<img src='prevImage.jpg' onclick='prevImage()'>
<img src='nextImage.jpg' onclick='nextImage()'>
</center>


That should be just about everything.. To make your life simpler. I would suggest actually doing the list of images with PHP.. using a simple function like this..



<?PHP
$numImages = 4;
print "<span id='1' class='on'><img src='1.jpg'></span>";
for($i=2; $i<$numImages; $i++)
{
print "<span id='$i' class='off'><img src='$i.jpg'></span>";
}
?>


This will save you a bundle of time.. Especially when you have to deal with more than 10 images :)

[trevorsaint]

Thanks for your reply :). much appreciated, I got it sorted ages ago :). I am sure this will come in handy, as every bit of information can prove useful at some stage.

Thanks again

Trev