Easy Java Script Slide Show Code
By Stephen Bucaro
Most of the example code that Iíve found on the web is bloated with unnecessary
complexity. Maybe the authors were trying to show off their proficiency in
programming. The extra complexity makes it very difficult to modify the examples for
your own use.
show below displays the first computers that I built. The first one is an IBM PC XT
clone that I built in 1984 (thatís right, youíre all newbies to me).
One of the problems with creating such a slide show is that the images should all
be the same size. If the images are not all the same size, your web page may grow
and shrink as the different images are displayed. You need to make provisions to
maintain the format of your web page. Possibly place the slide show in a table cell
with width and height set to the largest image.
In the demo slide show, I resized all the images to the height of the smallest image,
and then did some image editing to make them all the same width. You can also just put
gray borders on either side of an image to pad it out.
You can use the example code to put a slide show in your own web page by following
these four simple steps.
1. Name the image html element that you want to use for the slide show as shown
below. For this example it should be named "slide". The source (src) for the image
element would be the name of, or path to the first image in the slide show.
<img name="slide" border="0" height="390" width="380" src="firstimage.jpg">
2. In your <body> tag, enter the code to execute the swapImage function for
the onLoad event handler as shown below.
3. Paste the following code in the <head> section of your web page.
var i = 0;
var path = new Array();
// LIST OF SLIDES
path = "my8086a.jpg";
path = "my8086b.jpg";
path = "my80286a.jpg";
path = "my80286b.jpg";
document.slide.src = path[i];
if(i < path.length - 1) i++; else i = 0;
4. Edit the entries in the list of slides, replacing the names of my images with
the names or paths to your images. If you have fewer images, delete the extra lines
starting from the bottom. If you want more than four images in your slide show,
follow the pattern to add more lines, making sure to increment the array index
(number inside the brackets).
See the number 3000 in the code above? That sets the time between slides to 3000
milliseconds (3 seconds). You can increase or decrease that number as you choose.
That's all there is to it. You can easily use this code to create a slide show on
your web page. Give it a try. As simple as it is, it will really impress your friends!
More Java Script Code:
• Synchronous and Asynchronous Script Loading
• Regular Expressions Lookarounds
• Easy Expanding Menu Code
• Make Your Own Graphical Digital Clock
• HTML5 Canvas Drag-and-Drop
• Allowing Multiple Selections from Drop-down Select List