Automatically Advancing the Slide

Usually it is good to have a slide show advance manually — the user can linger over one slide if they want to, or quickly go on to the next one. However, sometimes it's nice to have a slide show that automatically advances. Here's how to do it.

Conceptually, the technique is as follows. Write a function that does two things:

• advances the slide, and
• uses the built-in JavaScript function called setTimeout(), to invoke the slide-advancing function every N milliseconds.

If that sounds weird, it is. The function is going to schedule itself to be invoked. That means that, once it gets started, it will keep going and going. But how does it get started? We haven't taken care of that yet. What we have to do is schedule the first invocation of this function separately. Usually, that's done by a button that starts the slide show.

Here's some code that advances the slide every 500 milliseconds (half a second):

<script language="JavaScript" type="text/JavaScript">
function nextSlide()
{
    // 1, advance the slide
    slideNumber = (slideNumber + 1 )%3;
    the_slide.src = filenames[slideNumber];
    // 2, arrange for this to happen again
    setTimeout("nextSlide();",500);
}    
</script>

Here is a functioning example — view the source to see how it is done. You can change the delay time, and the images shown in the slide show.