How to Create a Javascript Web Page Slide Show

Automatically Updating Displayed Images by Using Javascript Code

Sep 30, 2009
Mark Alexander Bain

How to Create a Javascript Web Page Slide Show - Mark Alexander Bain

The setTimeout enables a web site programmer to create animations simply and easily. They can create an impressive slide show show with just a little Javascript coding

It is very easy to create an animation loop with Javascript . How to Make Web Page Animations Using Javascript shows how an image can be moved around the display area of a web browser using the setTimeout method.

The command is used by a function to call itself after a short interval (for example 10ms) and this creates an infinite loop which can be used to animate a web page object. And, of course, this infinite loop can also be used to produce other effects on the web page. Effects such as a slide show.

Creating an Infinite Loop with setTimeout

The infinite loop is created by making a function call itself after a set time period (in this case 1 second):

function slideshow () {

setTimeout (function() { slideshow ()} , 1000, "JavaScript");

}

Here the function reset the timer when ever it runs, however it does not run automatically. The function mas be called from Javascript in order to set the loop in motion:

slideshow () ;

Nothing obvious will happen if this is viewed in a web browser, but something more definite can be seen with a little more code:

<body>

var i = 0;

var opDiv = document.getElementById("opDiv");

function slideshow () {

if (i>10) {i=0;}

opDiv.innerHTML = i;

i++;

setTimeout (function() { slideshow ()} , 1000, "JavaScript");

}

slideshow () ;

</script>

This time the web browser will be seen to continually count from 0 to 9. It's this simple technique that can be adapted to create a simple slide show.

Creating a Slide Show with setTimeout

The first step of creating a slide show is to set where the images are to be located and which is the default image:

<body>

var slideshow_img = document.getElementById("slideshow");

The next step is to define an array with the names (or the url if they are in a different location to the web page) of the images to be used in the slide show (examples of which can be seen in Figures 1-3 at the bottom of this article). The array is created by using the "new" method:

var images= new Array ("image01.jpg","image02.jpg","image03.jpg");

And then the programmer can then create the animation that will produce the slide show:

var i = 0;

function slideshow () {

if (i>images.length-1) {i=0;}

slideshow_img.src = images[i];

i++;

setTimeout (function() { slideshow ()} , 1000, "JavaScript");

}

It is worth noting here how the length of the array is used to determine when the loop should be reset to zero, and that the loop count is then used as the index number for the image to be loaded. This means that if the code is saved into a .html file and viewed in a web browser then the user will see a slide show that reveals a fresh image once every second.

Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...

Figure 1: A Slide Show Image - Mark Alexander Bain

Figure 2: A Second Slide Show Image - Mark Alexander Bain

Figure 3: A Third Slide Show Image - Mark Alexander Bain

Comments

Oct 4, 2009 10:18 AM

Guest :

Don't know if this is the right place to post but there was no 'Post Your Comment' button on the category page for Java/Javascript programming. Just wanted to let you know that clubbing Java and Javascript Programming at the category level seems a bit odd as they are not the same thing.

Have found some of the explanations really lucid and will comment on them separately.

Oct 10, 2009 10:40 AM

Yuen Kit Mun :

I use static HTML pages for creating web slideshows. An AWK script generates the HTML pages. I use the meta refresh tag to automatically advance to the next page.

<HEAD>
<META HTTP-EQUIV='Refresh' content='3; URL=page002.htm' >
</HEAD>

Advantage is better web browser compatibility and better integration with a user-controlled manual-advance slideshow feature (also generated by the AWK script: separate series of static HTML files). It's easy for the user to click and switch between auto slide show and manual advance (just normal hyperlinks), while keeping the same photo on the page. With a different HTML file for each photo, it's also possible for the user to bookmark and email the URL of individual photos.

2 Comments