Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

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

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" border="0" 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!

More Java Script Code:
• Java Script to Dynamically Add, Remove, and Change Items in a Select List
• Play Music on Your HTML5 Web Page
• Code for Java Script Circle/Sphere Calculator
• Java Script to Get Selected Item from Drop-down Select List
• Round a Float to 4 Digits to the Right of the Decimal Point
• Java Script Code to Re-arrange Items in a Select List
• Create Your Own Database Using Only Notepad : CDV
• Concatenating a String and Another Data Type
• JavaScript to Replace All Occurrences of a Substring Within a String
• Prototype Keyword Gives JavaScript Object Oriented Inheritance

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



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