Thursday, 23 June 2011

Make a Simple Image Slide Show in JavaScript

We can make a simple Image Slider in JavaScript.
Just  Create a simple HTML page using this code and view the result.

<html>
<head>
<title>Simple Slide</title>
</head>
<script language="javascript">
// make a array of images and pass the location of every image.
var myPix = new Array("images/1.jpg", "images/2.jpg", "images/3.jpg");
var thisPic = 0;
function goPrevious() {
     if (document.images && thisPic > 0) {
          thisPic--;
          document.myPicture.src = myPix[thisPic];
     }
}
function goNext() {
     if (document.images && thisPic < 2) {
          thisPic++;
          document.myPicture.src = myPix[thisPic];
     }
}
</script>
<body>
<img src="images/0.jpg" name="myPicture"><br>
<a href="javascript:goPrevious()">Previous</a>
<a href="javascript:goNext()">Next</a>
<body>
</html>

When you test it in your browser yow will see something like this:





No comments:

Post a Comment