Thursday, 14 August 2008

Javascript Simple Image Slideshow; Take 2

This Javascript image slideshow expands on the previous version, See Here.
As in the previous version, the user navigates through the slideshow using previous and next buttons, however the previous version required images to be numbered in sequence, image1.jpg image2.jpg etc, this version allows any filename. It also makes use of the image preload code, See Here, so that the images are loaded with the page, so there is no waiting for them to during the slideshow.

<html>

<head>

<script type="text/javascript">

var imageFiles=[];
var imageIndex=0;

function imageSwitch(i,d)
{
imageIndex += d;
if(imageIndex >= imageFiles.length){imageIndex=0;}
else if(imageIndex < 0){imageIndex=imageFiles.length-1}
i.src = imageFiles[imageIndex].src;
}

function imagePreload()
{
for(i=0; i<arguments.length; i++)
{
imageFiles[imageFiles.length]=new Image();
imageFiles[imageFiles.length-1].src=arguments[i];
}
}

imagePreload('your.jpg','list.jpg','of.jpg','images.jpg','goes.jpg','here.jpg');


</script>

</head>

<body>

<h1>Switch Image Source 2</h1>

<input type="button" value="Prev" onClick="imageSwitch(document.getElementById('myImg'),-1);"/>
<input type="button" value="Next" onClick="imageSwitch(document.getElementById('myImg'),1);"/>
<br/><br/>
<img id="myImg" src="image0.jpg"/>

</body>

</html>

Much better version...Done.

1 comment:

Anjana Teena said...

please show the o/p also