A JavaScript slide show is a group of codes in HTML/JavaScript that allows the user to click "Back" and "Next" while "flipping" through a set of digital pictures. Once you know the syntax, it is relatively easy to create a JavaScript slide show.
Instructions
- 1
Look at a sample JavaScript slide show. See the Resources section below to link to a slideshow on the Internet.
2Start a blank document in Notepad or your chosen HTML editor. Mark up the document with basic HTML tags as follows. You can enter any text in the title field; this tag displays in the blue title bar at the top of the web browser.
Set up your JavaScript slide show using the below code. imageGroup is the name of a new array, or set, of pictures. You can choose any name, not just imageGroup-you must simply keep the name of the array consistent throughout. The word "Array" is a JavaScript keyword and you cannot change it; make sure to capitalize the "A." The number beside the word "Array" in parentheses is the total number of pictures in the slideshow. This slideshow has two pictures, but yours can have as many images as you want.
imageGroup = new Array(2);
Assign a picture to each index value of your array. In the code below, the picture at position zero is imageGroup[0]. You must tell JavaScript that the object at position zero is a picture, hence the "new Image" code. Note that "Image" is a keyword and must be capitalized. The next line of code tells JavaScript which picture from your computer to pull into the position zero picture object. In this case, the name of the picture is "ketchikan.jpg." Note that file names are always case sensitive.
imageGroup[0] = new Image;
imageGroup[0].src = "ketchikan.jpg";
imageGroup[1] = new Image;
imageGroup[1].src = "lumberjackketchikan.jpg";
Type the code below. The "index = 0;" code means that the slideshow should start at the beginning of the array. The "function doBack()" code tells JavaScript what to do when the user clicks "Back" to see previous pictures. The "function doNext()" code tells JavaScript how to behave when the user wishes to see the next picture in the slide show. The "document.slideshow.src" code means that the current document on the screen (web browser) is using the object named "slideshow" (the container for your slide show of digital pictures) to make this bit of JavaScript code work.
index = 0;
function doBack()
if (index > 0)
index --;
document.slideshow.src =
imageGroup[index].src;
return;
function doNext()
if (index < 4)
index++;
document.slideshow.src =
imageGroup[index].src;
return;
name="slideshow"
width=430
height=300> Back
Next
