Use these to jump around or read it all…
[The Effect]
[The Code]
[How It Works]
I’ve been getting email lately asking how people are setting up multiple image slideshows
on their pages. I’ve seen a lot of these being used on CNN lately. I’m glad for it too.
I think the programming is good design.
The basic concept is that instead of having ten different images all on one page, you
set up a JavaScript that only displays one image. The user then sees the remainder of the
images by clicking on buttons or text. It’s a slideshow.
The Effect
I’ve actually had the code to do a basic slideshow in my JavaScript Primers for a while.
The problem is that the CNN slideshows, the shows that everyone wants, do a whole lot more than mine does. Mine simply showed the next image and then recycled. The CNN slideshows did a lot more including going backwards through the images and posting text.
So, I sat down one Saturday morning and recoded the basic slideshow code and came up with this. Take a look:
Right now it’s only moving through four images. Of course, you can set it to show as many or as few as you’d like.
Let’s get to the code and how it works.
The Code
The code is a little long, but not that hard to understand, so I’ll open it in a second window so you can look at it and refer to this tutorial to understand what’s going on.
How It Works
We’ll start down in the body section of the code. This is the code that will make up the stuff that
actually displays on the page.
OK, it’s all fairly basic stuff. We begin with an image command set to a specific height and width. The SRC is the SRC of the first image you want to display. After that, the JavaScript will take over and post the images for you.
The IMG tag is also given a name, “mypic”. That will become important in a while.
The next element is the text box that will hold the information about the image. It’s a basic form element. Notice that the form itself is named “joe” and the text box is named “burns”. Again, that’ll all become quite important in a moment.
Finally we have two sets of text set up to trigger two JavaScript functions,slideshowBack()andslideshowUp().
Now off now to the script itself…
At the top of the script is the obligatory
