- Creating Rollovers
- Creating More Effective Rollovers
- Building Three-State Rollovers
- Triggering Rollovers from a Link
- Making Multiple Links Change a Single Rollover
- Working with Multiple Rollovers
- Creating Cycling Banners
- Adding Links to Cycling Banners
- Building Wraparound Slideshows
- Displaying a Random Image
- Cycling Images with a Random Start
This chapter is from the book
This chapter is from the book
This chapter is from the book
Building Wraparound Slideshows
Slideshows on websites 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. Listing 4.18 shows the HTML needed, and the JavaScript in Listing 4.19 has what you need to add slideshows to your pages.
Listing 4.18 This HTML page creates a slideshow.
<!DOCTYPE html>
<html>
<head>
<title>Image Slideshow</title>
<script src="script09.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<div class="centered">
<h1>Welcome, Robot Overlords!</h1>
<img src="images/robot1.jpg" id="myPicture" width="200" height="400" alt="Slideshow">
<h2><a href="previous.html" id="prevLink"><< Previous</a> <a href="next.html" id="nextLink">Next >></a></h2>
</div>
</body>
</html>
Listing 4.19 This script builds a slideshow that the user can click through using links to control movement forward and back.
window.onload = initLinks;var thePic = 0; var myPix = new Array("images/robot1.jpg","images/robot2.jpg","images/robot3.jpg");function initLinks() {document.getElementById("prevLink").onclick = processPrevious;document.getElementById("nextLink").onclick = processNext;}function processPrevious() {if (thePic == 0) {thePic = myPix.length;}thePic--;document.getElementById("myPicture").src = myPix[thePic];return false; } function processNext() {thePic++;if (thePic == myPix.length) {thePic = 0;}document.getElementById("myPicture").src = myPix[thePic];return false; }
This script builds a slideshow that wraps around—that is, if you go past the end of the list you go back to the beginning and vice versa. 
shows the new slideshow.
)
Clicking the Previous or Next link calls the processPrevious() or processNext() function, respectively.
To build a wraparound slideshow:
window.onload = initLinks;
When the window finishes loading, trigger the initLinks() function.
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.
function processPrevious() { if (thePic == 0) { thePic = myPix.length;This function makes the slideshow run in the Previous direction. This first part checks to see if thePic is equal to 0. If it is, the function gets the number of pictures in the myPix array.
thePic--; document.getElementById("myPicture").src = myPix[thePic];The first line reduces the value of thePic by 1. The next line sets the src of myPicture to the element of the myPix array represented by the current value of thePic.
thePic++; if (thePic == myPix.length) { thePic = 0; } document.getElementById("myPicture").src = myPix[thePic];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 thePic by 1. Then it checks to see if the value of thePic is the same as the number of items in the myPix array. If so, it sets thePic back to 0. The next line sets the src of myPicture.