Dhtml

Slide Shows

Shortcuts

Overview

This tutorial teaches you how to create automatically running, looping slide shows on your web pages using DHTML.

Firstly, create the layers that contain the content for the slides of the slide show. They may contain text, images, tables, objects, etc. Name them all with some name (which is common for all of them), and their slide number on the end, eg. slideLayer1, slideLayer2, slideLayer3, etc. Position them so that they will overlap. You must also order their z-indeces in decending order. This is so that initially the first slide will be positioned over the second, which will be positioned over the third, etc.

<STYLE type="text/css">
<!--

#slideLayer1 {
   position: absolute;
   z-index: 5;
}

#slideLayer2 {
   position: absolute;
   z-index: 4;
}

#slideLayer3 {
   position: absolute;
   z-index: 3;
}

#slideLayer4 {
   position: absolute;
   z-index: 2;
}

// -->
</STYLE>

<DIV id="slideLayer1">
<IMG src="../images/slide01.jpg" width="396" height="297" border="0">
</DIV>

<DIV id="slideLayer2">
<IMG src="../images/slide02.jpg" width="396" height="297" border="0">
</DIV>

<DIV id="slideLayer3">
<IMG src="../images/slide03.jpg" width="396" height="297" border="0">
</DIV>

<DIV id="slideLayer4">
<IMG src="../images/slide04.jpg" width="396" height="297" border="0">
</DIV>

Part 2

Now you need to declare the global variables and constants and write the JavaScript functions to control the slide show.

The global variables and constants needed are shown below. nrSlides is the total number of slides in the show. currentSlideNr is a variable for the current slide. Set it initially to the first slide to be displayed (usually 1). slideRate determines the rate that the slide show will run. It is the number of milliseconds that each slide is displayed for.

var nrSlides = 4;
   /*
   ** nrSlides is a global variable for the total number of slides.
   */

var currentSlideNr = 1;
   /*
   ** currentSlideNr is a global variable for the current slide.
   */

var slideRate = 5000;
   /*
   ** slideRate is the length of time (in milliseconds) each slide
   ** is displayed for.
   */

The JavaScript functions you need to write are nextSlide(), prevSlide() and startSlideShow(). These are shown below. You will also need to include the showLayer() and hideLayer() functions given in previous tutorials. Notice that the startSlideShow() function calls itself in the setTimeout() call. This recursive function is what makes the slide show run automatically.

function nextSlide()
   /*
   ** nextSlide() shows the next slide after the current one.
   */
   {
      var nextSlideNr;

      nextSlideNr = currentSlideNr + 1;

      if (nextSlideNr > nrSlides) {
         nextSlideNr = 1;
      }

      hideLayer(eval('"slideLayer' + currentSlideNr +'"'));
      showLayer(eval('"slideLayer' + nextSlideNr + '"'));

      currentSlideNr = nextSlideNr;
   }

function prevSlide()
   /*
   ** prevSlide() shows the previous slide before the current one.
   */
   {
      var prevSlideNr;

      prevSlideNr = currentSlideNr + 1;

      if (prevSlideNr < 1) {
         prevSlideNr = nrSlides;
      }

      hideLayer(eval('"slideLayer' + currentSlideNr +'"'));
      showLayer(eval('"slideLayer' + prevSlideNr + '"'));

      currentSlideNr = prevSlideNr;
   }

function startSlideShow()
   /*
   ** startSlideShow() starts the automatically running slideshow.
   */
   {
      nextSlide();
      setTimeout("startSlideShow()", slideRate);
   }

Part 3

To make the slide show start when the HTML page loads, include a call to the startSlideShow() function in the "BODY" tag's onLoad event handler. The "BODY" tag will look something like this:

<BODY onLoad="init(); startSlideShow();">

In your implementation, you may also wish to include links or buttons that control the slide show, such as:

<A href="javascript:prevSlide()">Previous Slide</A> | 
<A href="javascript:nextSlide()">Next Slide</A>

To view a working example of this effect, click here.

Previous Tutorial
Go back
Next Tutorial