Image slider using Javascript.
In this article we will see how can we show the collection of images one by one using arrow keys. we will do it through the help of javascript. We will add some images path in the script and then show it one by one using javascript.
In this we will see how can we show the collection of images one by one by clicking on a button. For this we have used javascript. First in the javascript an array is created which contains the path of the images which we want to show.
Below is the script:
<script type="text/javascript">
var photos = new Array()
var which = 0
photos[0] = "Image/Chrysanthemum.jpg"
photos[1] = "Image/Desert.jpg"
photos[2] = "Image/Hydrangeas.jpg"
photos[3] = "Image/Jellyfish.jpg"
photos[4] = "Image/Koala.jpg"
function backward() {
if (which > 0) {
window.status = ''
which--
document.images.photoslider.src = photos[which]
}
}
function forward() {
if (which < photos.length - 1) {
which++
document.images.photoslider.src = photos[which]
}
else window.status = 'End of gallery'
}
</script>
below is the controls code which we have written inside the form tag.
We will take 2 button a backward and forward buttons and call the backward and forward javascript accordingly.
<table border="0">
<tr>
<td>
<img src="Image/left.gif" onclick="backward()">
</td>
<td>
<center>
<table border="1" cellpadding="0" bgcolor="#ddbbgg">
<tr>
<td width="100%">
<img src="Image/Desert.jpg" width="660" height="440" name="photoslider">
</td>
</tr>
</table>
</center>
</td>
<td>
<img src="Image/right.gif" onclick="forward()">
<br>
</td>
</tr>
</table>