Angelfire - Script Library

Image Slideshow

Put up to nine images on one page without taking up a lot of space — create your own slide show!

Example:

Follow the editing instructions after the // and after the  to customize the script, after you copy and paste it into your HTML editor.

<form>
<center>
<script language="JavaScript">
<!--

var current = 0;

function imageArray()
{
  this.length = imageArray.arguments.length;
  for (var i = 0; i < this.length; i++)
  {
     this[i] = imageArray.arguments[i];
  }
}
// All images MUST BE OF THE SAME SIZE, since
// the dimensions of the first image will be
// used for all subsequent images.
// All the images for your slide show need to
// be stored in the same directory.
// You can use any group and any
// number of images. Place your images within
// each set of quotation marks below.
// If the images are all in your Angelfire
// images subdirectory, makes sure the name
// of each image starts with "images/" like
// in the example below.
var imgz = new imageArray("images/0.gif","images/1.gif","images/2.gif","images/3.gif","images/4.gif","images/5.gif","images/6.gif","images/7.gif","images/8.gif","images/9.gif");

document.write('<img name="myImages" border="1" src="'+imgz[0]+'">');

function getPosition(val)
{
  var goodnum = current+val;
  if (goodnum < 0)
// This message is displayed if your visitor
// tries to click back past your first image.
// Place your message within the quotation
// marks below.
    alert("You can't go any farther back!");

else
    if (goodnum > imgz.length-1)
// This message is displayed if your visitor
// tries to click past your last image. Place
// your message within the quotation marks
// below.
      alert("You can't go any farther forward!");
    else
      document.myImages.src = imgz[goodnum];

current = goodnum;
}

//-->
</script>
<br>
  <input type="button" value="<<" onclick="getPosition(-1)">
  <input type="button" value=">>" onclick="getPosition(1)">
</center>
</form>

Angelfire.com

Professional, but fun, websites!

Image Slideshow

Tools & Resources

Other Services