Previous Page
Next Page

Building Wraparound Slideshows

Slideshows on Web sites present the user with an image and let the user control the progression (either forward or backward) of the images. JavaScript gives the user the interactive control needed. Script 4.16 shows the HTML needed, and the JavaScript in Script 4.17 has what you need to add slideshows to your pages.

Script 4.16. This HTML page creates a slideshow.

[View full width]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Image Slideshow</title>
     <script type="text/javascript" language="Javascript" src="script09.js"> </script>
</head>
<body bgcolor="#FFFFFF">
     <div align="center">
        <h1>US Missions to Mars</h1>
        <img src="images/pathfinder.gif" id="myPicture" width="201" height="155"
 alt="Slideshow" />
        <h2><a href="previous.html" id="prevLink">&lt;&lt; Previous</a>&nbsp;&nbsp;<a 
href= "next.html" id="nextLink"> Next &gt;&gt;</a></h2>
     </div>
</body>
</html>

Script 4.17. This script builds a slideshow that the user can click through using links to control movement forward and back.

window.onload = initLinks;

var myPix = new Array("images/pathfinder.gif", "images/surveyor.gif","images/surveyor98.gif");
var thisPic = 0;

function initLinks() {
     document.getElementById("prevLink"). onclick = processPrevious;
     document.getElementById("nextLink"). onclick = processNext;
}
function processPrevious() {
     if (thisPic == 0) {
        thisPic = myPix.length;
     }
     thisPic--;
     document.getElementById("myPicture").src = myPix[thisPic];
     return false;
}

function processNext() {
     thisPic++;
     if (thisPic == myPix.length) {
        thisPic = 0;
     }
     document.getElementById("myPicture").src = myPix[thisPic];
     return false;
}

This script builds a slideshow that wraps aroundthat is, if you go past the end of the list you go back to the beginning and vice versa. Figure 4.14 shows the new slideshow.

Figure 4.14. Clicking the Previous or Next link calls the processPrevious() or processNext() function, respectively.


To build a wraparound slideshow:

1. 
window.onload = initLinks;



When the window finishes loading, trigger the initLinks() function.

2. 
function initLinks() {
  document.getElementById ("prevLink").onclick = processPrevious;
  document.getElementById ("nextLink").onclick = processNext;
}



This function sets up the onclick event handlers for the Previous and Next links.

3. 
function processPrevious() {
  if (thisPic == 0) {
     thisPic = myPix.length;



This function makes the slideshow run in the Previous direction. This first part checks to see if thisPic is equal to 0. If it is, the function gets the number of pictures in the myPix array.

4. 
thisPic--;
document.getElementById ("myPicture").src = myPix[thisPic];

The first line reduces the value of thisPic by 1. The next line sets the src of myPicture to the element of the myPix array represented by the current value of thisPic.

5. 
thisPic++;
if (thisPic == myPix.length) {
  thisPic = 0;
}
document.getElementById ("myPicture").src = myPix[thisPic];



This code, inside the processNext() function, makes the slideshow run in the Next direction and is much like the processPrevious() function. The first thing it does is increment the value of thisPic by 1. Then it checks to see if the value of thisPic is the same as the number of items in the myPix array. If so, it sets thisPic back to 0. The next line sets the src of myPicture.


Previous Page
Next Page