raingod >> resources >> JavaScript >> Software >> Rolling Slideshow  

Rolling Slideshow [Source]

Last updated: 08.05.2002

Source code for the Rolling 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 to give the URLs for 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() {
	gCurrentImage = (gCurrentImage + 1) % gNumberOfImages;
	loadSlide(gImages[gCurrentImage]);
}

// 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>
[raingod:resources:javascript] -- [up][links][home]