Slide Show

2. Obtain the Script

Join the Discussion

Questions? Comments?

More of this Feature

Introduction Add to Your Page

To make a slide show for your web page you need to copy the following script and attach it to the head section of your page.

var imgs = new Array(); var imgcnt = 0; var thisimg = 0;
imgs[imgcnt++] = 'graphics\/pic1a.gif';
imgs[imgcnt++] = 'graphics\/pic2a.gif';
imgs[imgcnt++] = 'graphics\/pic3a.gif';

function nextImg() {
if (document.images) {
  thisimg++;
  if (thisimg >= imgcnt) thisimg = 0;
  document.rollimg.src = imgs[thisimg];
}
}
function prevImg() {
if (document.images) {
  thisimg--;
  if (thisimg < 0) thisimg = imgcnt-1;
  document.rollimg.src = imgs[thisimg];
}
}

The code shown in bold should be kept exactly as shown

In my example, I have three images so I need three sets of lines to define three images. You just need to specify as many separate entries as you need for your particular setup.

Once you have created your code you just save it to an external javascript file. I called mine img2.js. You then link it into the head of your page using the following code:

Now all that remains is to add the images to your page.

Sample Page | Obtain the Script | Add to Your Page

Guide since 2004

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

JavaScript