Slide shows are easily programmed with JavaScript. They are usually done with images, though they can be made with other forms of html.
Slide shows typically use a single image in the body of the html file. The source of this image is changed at intervals.
The JavaScript code must contain:
Here is the simplest slide show I know how to write.
The sizing of the images is done by the html.
The function
<html> <head> <script type=text/javascript>var source= new Array(); var i=0; source[0]="../family/discipleSet.jpg"; source[1]="../family/jenAdj.jpg"; source[2]="../family/bro.jpg"; source[3]="../family/christie.jpg"; source[4]="../family/toBeHung.jpg"; function changeSlide(){ document.images.slide.src=source[i]; if (i< 4) {i++} else {i=0}; }</script> </head> <body> <p> <img src="../family/denali.jpg" id="slide" width="50%"> <script type="text/javascript"> setInterval('changeSlide()',2000); </script> </body> </html>
The next script shows how performance of the slide show can be improved by preloading the images. Images need to be preloaded when they are large, or when they are to be shown in rapid succession. This avoids allows them to download before the show is started, or while it is in progress.
This script also preserves the initial size of the images.
<html> <head> <script type=text/javascript>var im= new Array(); var i=0; im[0] = new Image(542,362); im[0].src="../family/discipleSet.jpg"; im[1] = new Image(400,374); im[1].src="../family/jenAdj.jpg"; im[2] = new Image(329,374); im[2].src="../family/bro.jpg"; im[3] = new Image(280,374); im[3].src="../family/christie.jpg"; im[4] = new Image(247,374); im[4].src="../family/toBeHung.jpg"; function changeSlide(){ document.images.slide.src=im[i].src; document.images.slide.width=im[i].width;; document.images.slide.height=im[i].height; if (i<im.length) {i++} else {i=0}; }</script> </head> <body> <p> <img src="../family/denali.jpg" id="slide"> <script type="text/javascript"> setInterval('changeSlide()', 2000); </script> </body> </html>
Optional Tasks:
Writing a JavaScript slide show of any length by hand would be tedious.
The JavaScript program can be written by a PHP program on the server,
thus dispensing with the tedious listing of image source files.
Determination of image width and height is quickly and reliably done by PHP, using
the function
Div's can contain any html content.
When using div's, all div's are included in the body. Their display property is rotated.
Div Slide Show from JavaScriptKit.com
Div Slide Show Explanatory Notes