Webmaster
Tips
[ All Tips ]
A slideshow that automatically plays
To create a slideshow without transition or other effects, all you need is a little JavaScript.
Copy this script in the header of your page:
<SCRIPT LANGUAGE="JavaScript">
<!--
var timeDelay = 5;
var Pix = new Array
("my_image_01.jpg"
,"my_image_02.jpg"
,"my_image_03.jpg"
,"my_image_04.jpg"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
// End -->
</script>
To personalize it:
-
Choose the transition delay between the images in seconds (timeDelay=5;)
Enter the name of the images you want to display in the slideshow (Pix=new Array("my_image_01.jpg","my_image_02.jpg"...);)
<body OnLoad="startPix()">
Finally and most important, place the <img> tag where you want the slideshow to appear. Using the src attribute, specify the name of the first image to display:
<img name="ChangingPix" src="my_image_01.jpg">
Discover all Webmaster tips.