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>
<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.
Posts
1 comment:
please show the o/p also
Post a Comment