SHOW:
|
|
- or go back to the newest paste.
| 1 | <!doctype html> | |
| 2 | - | imgArray = new Array(4); |
| 2 | + | |
| 3 | - | imgArray[0] = new Image; |
| 3 | + | function initSlideshow() {
|
| 4 | - | imgArray[0].src = "pop.jpg" |
| 4 | + | var backLink = document.getElementById('back');
|
| 5 | - | imgArray[1] = new Image; |
| 5 | + | var nextLink = document.getElementById('next');
|
| 6 | - | imgArray[1].src = "grandmom.jpg"; |
| 6 | + | backLink.addEventListener('click', doBack);
|
| 7 | - | imgArray[2] = new Image; |
| 7 | + | nextLink.addEventListener('click', doNext);
|
| 8 | - | imgArray[2].src = "ray.jpg"; |
| 8 | + | |
| 9 | - | index = 0; |
| 9 | + | var slideshowImage = document.getElementById('slideshow');
|
| 10 | var imgArray = ['pop.jpg', 'grandmom.jpg', 'ray.jpg']; | |
| 11 | - | function doBack() |
| 11 | + | var cache = new Image(); |
| 12 | - | {
|
| 12 | + | var index = imgArray.length; |
| 13 | - | if (index > 0) |
| 13 | + | while (--index) {
|
| 14 | - | {
|
| 14 | + | cache.src = imgArray[index]; |
| 15 | - | index--; |
| 15 | + | } |
| 16 | - | document.slideshow.src = imgArray[index].src; |
| 16 | + | // index is now 0, which is exactly what we want |
| 17 | - | } |
| 17 | + | |
| 18 | - | return; |
| 18 | + | function doBack() |
| 19 | {
| |
| 20 | - | function doNext() |
| 20 | + | if (index > 0) |
| 21 | - | {
|
| 21 | + | {
|
| 22 | - | if (index < 2) |
| 22 | + | index--; |
| 23 | - | {
|
| 23 | + | slideshowImage.src = imgArray[index]; |
| 24 | - | index++; |
| 24 | + | console.log(imgArray[index]); |
| 25 | - | document.slideshow.src = imgArray[index].src; |
| 25 | + | } |
| 26 | - | } |
| 26 | + | } |
| 27 | - | return; |
| 27 | + | function doNext() |
| 28 | {
| |
| 29 | if (index < 2) | |
| 30 | {
| |
| 31 | - | <img src = "mit.jpg" name="slideshow"> |
| 31 | + | index++; |
| 32 | slideshowImage.src = imgArray[index]; | |
| 33 | console.log(imgArray[index]); | |
| 34 | - | <a href=javascript:doBack()>Back</a> |
| 34 | + | } |
| 35 | - |       |
| 35 | + | } |
| 36 | - | <a href=javascript:doNext()>Next</a> |
| 36 | + | |
| 37 | ||
| 38 | // standard | |
| 39 | if (document.addEventListener) {
| |
| 40 | document.addEventListener('DOMContentLoaded', initSlideshow, false)
| |
| 41 | } | |
| 42 | // IE | |
| 43 | else if (window.attachEvent) {
| |
| 44 | window.attachEvent('onload', initSlideshow)
| |
| 45 | } | |
| 46 | </script> | |
| 47 | ||
| 48 | <img src="mit.jpg" id="slideshow"> | |
| 49 | ||
| 50 | <br> | |
| 51 | ||
| 52 | <a href="#" id="back">Back</a> | |
| 53 | | |
| 54 | <a href="#" id="next">Next</a> |
