First page Back Continue Last page Image
- <!DOCTYPE html>
- <html>
- <head>
- <title>Image Slideshow</title>
- <link rel="stylesheet" href="script08.css">
- <script src="script08.js"></script>
- </head>
- <body>
- <h3 class="centered">
- <img src="images/callisto.jpg" id="myPicture" alt="Slideshow"><br>
- Use the right and left arrows on your keyboard to view the slideshow
- </h3>
- </body>
- </html>
- document.onkeydown = keyHit;
- var thisPic = 0;
- function keyHit(evt) {
- var myPix = new Array("images/callisto.jpg", "images/europa.jpg", "images/io.jpg", "images/ganymede.jpg");
- var imgCt = myPix.length-1;
- var ltArrow = 37;
- var rtArrow = 39;
- if (evt) { // If not Microsoft
- var thisKey = evt.which;
- }
- else { // If it is Microsoft
- var thisKey = window.event.keyCode;
- }
- if (thisKey == ltArrow) {
- chgSlide(-1);
- }
- else if (thisKey == rtArrow) {
- chgSlide(1);
- }
- function chgSlide(direction) {
- thisPic = thisPic + direction;
- if (thisPic > imgCt) {
- thisPic = 0;
- } // Roll back to start or end
- if (thisPic < 0) {
- thisPic = imgCt;
- }
- document.getElementById("myPicture").src = myPix[thisPic];
- }
- }
- body {
- background-color: #FFF;
- }
- .centered {
- text-align: center;
- }
- img#myPicture {
- width: 262px;
- height: 262px;
- }
evt contains event info from browser