Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat.

free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class">

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

<Code_Punk>'s

Beginning JavaScript Lesson 17:
Making A Simple Slideshow

Code Tutorials



Site Development



Downloads



Help!!



Home

Slide Show Example

A slide show is a type of image rollover where the image is changed by time and not a viewer event. An initial image appears and is replaced by another in a given period of time. You can cycle through as many images as you'd like and adjust the speed to your needs.

Here's an example of a simple slide show that cycles through four images.

Simple Two Image Slide Show

This simple slide show hinges on a JavaScript "window" object method called "setTimeout()". To get started, get a couple of images to work with and make a simple page displaying one of them. I'll be calling this image "first_image.jpg" and I'll NAME the <img> object "slidepix". You'll be using real filenames and whatever <img> NAME you want.

<body>

< img src="first_image.jpg" name="slidepix">

</body>

To get the slide show started, we need to determine when we want to show to begin. I've coded my slide show to start automatically when the page loads using the "onLoad" event in the page's <body> tag. You could just as easily have it start on an "onMouseOver" or other event.

I sent the "onLoad" event to a function I'm calling "startSlideShow()". This function will only be run once to get things rolling. Here's the code in the <body> tag:

<body onLoad="startSlideShow()">

< img src="first_image.jpg" name="slidepix">

</body>

You should already be familiar with this. Now lets code the function in the <head> of our page:

<script language="JavaScript">

function startSlideShow(){
setTimeout("pic1()",1000)
}

</script>

Lets talk about the "setTimeout()" method. All setTimeout does is create a pause before another function is run. The other function in this case is "pic1()" which I haven't coded yet.

The syntax of setTimeout is pretty straightforward. Type "setTimeout" minding the capital "T". Now make set of parentheses. The first thing to put in these parentheses is the name of the function you want to run after the the assign time has passed. This goes in double quotes and is followed by a comma.

The second part is the number of milliseconds you want to wait before starting the function coded in the first part of setTimeout. One-thousand milliseconds equal one second. I've set this setTimeout to run the function "pic1()" after a pause of one second (1,000 milliseconds).

Now lets start coding the functions that will load the second image and cycle back through the two images. First will make the "pic1()" function:

<script language="JavaScript">

function startSlideShow(){
setTimeout("pic1()",1000)
}

function pic1(){
document.images.slidepix.src="second_image.jpg";
setTimeout("pic2()",1000);
}

</script>

You're probably already beginning to see how this is going to work. What we've done with the "pic1()" function is to replace the default "first_image.jpg" with "second_image.jpg". Next we coded another setTimeout() to wait another one second before running the function "pic2()".

As you've probably already guessed, we'll be coding a setTimeout() in the "pic2()" function that leads back to the "pic1()" function. This will loop our slide show to run as long as the page is loaded.

<script language="JavaScript">

function startSlideShow(){
setTimeout("pic1()",1000)
}

function pic1(){
document.images.slidepix.src="second_image.jpg";
setTimeout("pic2()",1000);
}

function pic2(){
document.images.slidepix.src="first_image.jpg";
setTimeout("pic1()",1000);
}

</script>

Notice here that the "pic2()" function uses its setTimeout() to lead back to the "pic1()" function. This will close a loop that will display the two images, each in one second cycles.

Multiple Image Slide Show

Using the procedure above, you can add as many images to the loop as you'd like. Just code a function for each image that leads to the next image's function. The last image function coded will lead back to the first. Here's the code for the example:

<script language="JavaScript">

function startSlideShow(){setTimeout("pic1()",1000);}

function pic1(){document.images.slidepix.src="screw.jpg";
setTimeout("pic2()",1000);}

function pic2(){document.images.slidepix.src="washer.jpg";
setTimeout("pic3()",1000);}

function pic3(){document.images.slidepix.src="capnut.jpg";
setTimeout("pic4()",1000);}

function pic4(){document.images.slidepix.src="cplogo.jpg";
setTimeout("pic1()",1000);}

</script>

Pretty simple really. The only thing I might add is that the initial "startSlideShow()" function could be replaced with a function that reloads the first image before starting. Then you'd loop back to this function in the last function to complete the loop and save yourself having to code the initial function.

Also note that pre-loading your images with JavaScript is required for the first cycle to run smoothly.

Summary & Exercises

You can make a slide show by using setTimeout() instead of a particular event. You can get this started by using the onLoad event once. The setTimeout()'s will do the rest.

To code the setTimeout begin by typing "setTimeout" and a set of parentheses. The first item in the parentheses is the next function to run. This is put in double quotes. The second part is a number representing the time to pause in milliseconds. The milliseconds are not put in quotes. The function and milliseconds are separated by a comma.

You can cycle through as many images as you'd like by coding a function for each image. These functions will first change the image file and then use setTimeout() to go to the next image's function. The last image function coded leads back to the first making a loop.

Make simple image slide shows and play around with the millisecond value to see how fast you can get the slide show to run. There are some practical limits below 50 or so milliseconds. It depends on how large your image files are.



To Next Beginning JavaScript Lesson

Back To Beginning JavaScript Index