Script Categories













Miscellaneous >>> Basic Slideshow.

This slideshow allows you to browse through the images manually or automatically.

Previous Auto/Stop Next

Step 1: Add the below code to the <body> section of your page:

<script language="javascript" type="text/javascript">
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
NewImg = new Array (
"gecko.jpg",
"lizard.jpg",
"toad.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 2000;

var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
   }
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
   }
}
//  End -->
</script>
<center>
<img src="toad.jpg" name="slideshow" width="330" height="190">
<table>
<tr>
<td
align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
<td
align="center"><a href="javascript:auto()">Auto/Stop</a></td>
<td
align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>
</center>

Step 2: The script uses three images as part of its interface. You can create your own, or use the three below (resized for easier download):

(right click images, and select "Save Image As")
Upload them into the same directory as your webpage.

JavaScript Editor Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.



Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).




©