Javascript - next/previous buttons on slide show - New kid needs assistance
Question
I am brand new at this so I apologize because I'm sure an intermediate could pull his or her answer from what's already been asked, but I need specific help.
I'm having trouble getting my "next" and "previous" buttons for my slideshow to work in Javascript. Once the user clicks through all 5 images, it needs to return to the first image, ready to click through again-- a continuous loop. I think arrays are supposed to be utilized. What am I missing?
Thank you!!
var imageCache = []; var imageItem = 0; var images = 0; var captionNode; var imageNode; var $ = function (id) { return document.getElementById(id); } window.onload = function () { var listNode = $("image_list"); var nextButton = $("next"); var previousButton = $("previous"); captionNode = $("caption"); imageNode = $("image"); var links = listNode.getElementsByTagName("a"); var i, linkNode, image; for ( i = 0; i < links.length; i++ ) { linkNode = links[i]; // Pre-load image and copy title properties. image = new Image(); image.src = linkNode.getAttribute("href"); image.title = linkNode.getAttribute("title"); imageCache.push(image); } // Now record the total images we have. images = imageCache.length; // Set up the button handlers. nextButton.onclick = nextButtonClick; previousButton.onclick = previousButtonClick; } function nextButtonClick() { } function previousButtonClick() { }
article, aside, figure, figcaption, footer, header, nav, section { display: block; } body { font-family: Arial, Helvetica, sans-serif; width: 380px; margin: 0 auto; padding: 20px; border: 3px solid blue; } h1, h2, ul, p { margin: 0; padding: 0; } h1 { padding-bottom: .25em; color: blue; } h2 { font-size: 120%; padding: .5em 0; } ul { display: none; } img { height: 250px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul> <h2 id="caption">Casting on the Upper Kings</h2> <p> <img src="images/casting1.jpg" alt="" id="image"> </p> <input type="button" value="Previous" name="previous" id="previous"> <input type="button" value="Next" name="next" id="next"> </section> </body> </html>
2 answers
solution1
2 2014-10-16 02:41:37
You have the following variables:
var imageCache = [];
var imageItem = 0;
var images = 0;
Presumably imageItem is the index of the currently displayed image (eg 0 for the first one) and images is the number of images (ie imageCache.length ). To get the next image:
imageItem = ++imageItem % images;
var nextImage = imageCache[imageItem];
This will wrap around to zero when imageItem reaches the number of images in the cache. Similarly for previous:
imageItem = (--imageItem + images) % images;
var prevImage = imageCache[imageItem];
so that when imageItem reaches 0, subtracting 1 goes to -1 and adding imageCache.length sets it to the last image. The rest of the time it's left at imageItem - 1 .
It's up to you to fill in the rest of the code. :-)
solution2
0 2014-10-16 04:27:04
I would use an array zipper to implement the next and prev functions. An array zipper is a data structure that allows you to move forward and backward through an array.
function ArrayZipper(array) {
var length = array.length, index = 0;
this.getCurrent = function () {
return array[index];
};
this.getNext = function () {
return array[index = (index + 1) % length];
};
this.getPrevious = function () {
return array[index = (length + index - 1) % length];
};
}
You can use an array zipper to create a slide show as follows:
var zipper = new ArrayZipper([ "black" , "blue" , "green" , "cyan" , "red" , "magenta" , "yellow" , "white" ]); var style = $("color").style; style.backgroundColor = zipper.getCurrent(); $("next").addEventListener("click", function () { style.backgroundColor = zipper.getNext(); }); $("prev").addEventListener("click", function () { style.backgroundColor = zipper.getPrevious(); }); function $(id) { return document.getElementById(id); } function ArrayZipper(array) { var length = array.length, index = 0; this.getCurrent = function () { return array[index]; }; this.getNext = function () { return array[index = (index + 1) % length]; }; this.getPrevious = function () { return array[index = (length + index - 1) % length]; }; }
#color { height: 100px; width: 100px; }
<div id="color"></div> <button id="next">Next</button> <button id="prev">Prev</button>
Hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.