Photo slide show : Image Rollover « Ajax Layer « JavaScript DHTML






  1. JavaScript DHTML
  2. Ajax Layer
  3. Image Rollover

Photo slide show

  

<html>
<head>
<title>Slideshow</title>
<script type="text/javascript">
var index = 0;
var pics = new Array();
for (var i = 0; i < 5; i++) {
  pics[i] = new Image();
}
pics[0].src = "1.jpg";
pics[1].src = "2.jpg";
pics[2].src = "3.jpg";
pics[3].src = "4.jpg";
pics[4].src = "5.jpg";

function changePhoto(photo) {
   document.images[0].src = pics[photo].src;
}
function nextPic() {
  index++;
  if (index < pics.length) {
    changePhoto(index);
  }
}

function prevPic() {
  if (index > 0) {
    index--;
    changePhoto(index);
  }
}
</script>
</head>
<BODY>
<img src="1.jpg" />
<a href="" onclick="nextPic();return false">Next picture</a> 
<a href="" onclick="prevPic();return false">Previous picture</a>

</body>
</html>








Related examples in the same category

1.Image Rollover event
2.Image Rollover Demo