One of the problems with creating such a slide show is that the images should all be the same size. If the images are not all the same size, your web page may grow and shrink as the different images are displayed.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Java Script Slide Show Code

Most of the example code that Iíve found on the web is bloated with unnecessary complexity. Maybe the authors were trying to show off their proficiency in programming. The extra complexity makes it very difficult to modify the examples for your own use.

This article provides the minimal code for a JavaScript slide show. The slide show below displays the first computers that I built. The first one is an IBM PC XT clone that I built in 1984 (thatís right, youíre all newbies to me).

One of the problems with creating such a slide show is that the images should all be the same size. If the images are not all the same size, your web page may grow and shrink as the different images are displayed. You need to make provisions to maintain the format of your web page. Possibly place the slide show in a table cell with width and height set to the largest image.

In the demo slide show, I resized all the images to the height of the smallest image, and then did some image editing to make them all the same width. You can also just put gray borders on either side of an image to pad it out.

You can use the example code to put a slide show in your own web page by following these four simple steps.

1. Name the image html element that you want to use for the slide show as shown below. For this example it should be named "slide". The source (src) for the image element would be the name of, or path to the first image in the slide show.

<img name="slide" height=390 width=380 src="firstimage.jpg">

2. In your <body> tag, enter the code to execute the swapImage function for the onLoad event handler as shown below.

<body onLoad="swapImage()">

3. Paste the following code in the <head> section of your web page.

<script language="JavaScript">
var i = 0;
var path = new Array();

// LIST OF SLIDES
path[0] = "my8086a.jpg";
path[1] = "my8086b.jpg";
path[2] = "my80286a.jpg";
path[3] = "my80286b.jpg";

function swapImage()
{
   document.slide.src = path[i];
   if(i < path.length - 1) i++; else i = 0;
   setTimeout("swapImage()",3000);
}
</script>

4. Edit the entries in the list of slides, replacing the names of my images with the names or paths to your images. If you have fewer images, delete the extra lines starting from the bottom. If you want more than four images in your slide show, follow the pattern to add more lines, making sure to increment the array index (number inside the brackets).

See the number 3000 in the code above? That sets the time between slides to 3000 milliseconds (3 seconds). You can increase or decrease that number as you choose.

Thatís all there is to it. You can easily use this code to create a slide show on your web page. Give it a try. As simple as it is, it will really impress your friends!

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268