This script creates a simple slideshow you can add to your web page. It lets you cycle through a collection of images. You can store the array of images on the actual web page within this script, or you can even keep the array in a separate .JS file in order to maintain it separately without changing the page.
See a DemoCode:<html> <head> <title>Simple Slideshow</title> <script language="JavaScript"> <!-- // Add your pictures to an array called pics pics = new Array(); // Set the title and file location (URL) of each pics element // Add as many pictures as you want // Note that JavaScript arrays start at 0 pics[0] = new Array("Title 1", "your_file_1_url.jpg"); pics[1] = new Array("Title 2", "your_file_2_url.jpg"); pics[2] = new Array("Title 3", "your_file_3_url.jpg"); pics[3] = new Array("Title 4", "your_file_4_url.jpg"); pics[4] = new Array("Title 5", "your_file_5_url.jpg"); // Set the index of the first image (array starts at 0) var index = 0; // Increments the picture function incrementPic() { index = index + 1; if (index == pics.length) { *index = 0; } loadPic(); return; } // Decrements the picture function decrementPic() { index = index - 1; if (index < 0) { *index = pics.length - 1; } loadPic(); return; } // Loads the picture onto the page function loadPic() { document.images["pic"].src = pics[index][1]; document.images["pic"].alt = pics[index][0]; return; } // --> </script> </head> <body onload="loadPic();"> <p><img name="pic" src="images/spacer.gif" border="0" alt="" /></p> <p><a href="javascript:decrementPic();">PREV</a> | <a href="javascript:incrementPic();">NEXT</a></p> </body> </html>
If there is enough interest in this sort of thing, I'll add an advanced version with automatic play/looping and drop-down menu selection of individual images.
dmeister
Reply With Quote
,,, thanx alot man
