raingod >> resources >> JavaScript >> Software >> Random Slideshow

Random Slideshow [Source]

Last updated: 08.05.2002

Source code for the Random Slideshow script to display a rolling slideshow in a Web page. This script should be placed in the <HEAD> of the page in which you want to use it. The page must also contain an <IMG> tag whose NAME is "slide", i.e.

<IMG NAME="slide" WIDTH=200 HEIGHT=100 SRC="foo.gif">

and whose SRC points to the first image in the slideshow.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

// ======================================================================
//              THE USER SHOULD CHANGE THIS PART TO CUSTOMIZE THE SCRIPT
// ======================================================================

// gSlideshowInterval - determines how often the slide show is
// refreshed (time given in seconds).

gSlideshowInterval = 5;

// gNumberOfImages - the total number of images available for display.
// This is used both to set up the image array and to manage the actual
// slideshow.

gNumberOfImages = 5;

// gImages - An array that holds the URLs identifying the images to be
// shown in the slide show.

gImages = new Array(gNumberOfImages);

// Fill in the array with the URLs of the images that you want to use.

gImages[0] = "../RandomImages/inline/imageSample01.gif";
gImages[1] = "../RandomImages/inline/imageSample02.gif";
gImages[2] = "../RandomImages/inline/imageSample03.gif";
gImages[3] = "../RandomImages/inline/imageSample04.gif";
gImages[4] = "../RandomImages/inline/imageSample05.gif";

// ======================================================================
//                                                      DON'T CHANGE THIS PART
// ======================================================================

// canManipulateImages - check if the browser we're using can do
// clever stuff with document images.

function canManipulateImages() {
        if (document.images)
                return true;
        else
                return false;
}

// loadSlide
//
// Load a given image into place by substituting its URL for the URL 
// currently loaded by the <IMG> object called 'slide'. 

function loadSlide(imageURL) {
        if (gImageCapableBrowser) {
                document.slide.src = imageURL;
                return false;
        }
        else {
                return true;
        }
}

// nextSlide
//
// Update the counter that shows which slide is being displayed, and
// load it into place. The modulo (%) is there to ensure that we roll
// over when we reach the end of the slideshow.

function nextSlide() {
        while(true) {
                gNextImage = pickRandom(gNumberOfImages);
                if (gNextImage != gCurrentImage)
                        break;
        }
        gCurrentImage = gNextImage;
        loadSlide(gImages[gCurrentImage]);
}

// pickRandom
//
// Return a random number in a given range (it returns a number
// between 0 and (range - 1). If 'Math.random' isn't implemented in
// this version of JavaScript, return a value faked up from the
// current time.

function pickRandom(range) {
        if (Math.random)
                return Math.round(Math.random() * (range-1));
        else {
                var now = new Date();
                return (now.getTime() / 1000) % range;
        }
}

// gImageCapableBrowser - is this browser hip to images? Set up
// a global variable so that we don't have to keep calling a function
// (useful if the function becomes costly to compute).

gImageCapableBrowser = canManipulateImages();

// gCurrentImage - a variable used to keep track of the image
// currently being displayed to the user.

gCurrentImage = 0;

// Set up the timer. This will call the 'nextSlide()' function repeatedly at 
// the specified interval (and will continue to do so until the page is unloaded).

setInterval("nextSlide()",gSlideshowInterval * 1000);

// -->
</SCRIPT>