First page Back Continue Last page Image
- document.addEventListener("keydown",keyHit,false);
- var thisPic = 0;
- function keyHit(evt) {
- var myPix = new Array("images/catseyenebula.jpg", "images/crabnebula.jpg","images/eskimonebula.jpg", "images/ringnebula.jpg");
- var imgCt = myPix.length-1;
- var ltArrow = 37;
- var rtArrow = 39;
- if (evt) {
- var thisKey = evt.which;
- }
- else {
- 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;
- }
- if (thisPic < 0) {
- thisPic = imgCt;
- }
- document.getElementById("myPicture").src = myPix[thisPic];
- }
- }
- <!DOCTYPE html>
- <html>
- <head>
- <title>Image Slideshow</title>
- <link rel="stylesheet" href="script09.css">
- <script src="script09.js"></script>
- </head>
- <body>
- <h3 class="centered">
- <img src="images/catseyenebula.jpg" id="myPicture" alt="Slideshow">
- <br>
- Use the right and left arrows on your keyboard to view the slideshow
- </h3>
- </body>
- </html>
- body {
- background-color: #FFF;
- }
- .centered {
- text-align: center;
- }
- img#myPicture {
- width: 500px;
- height: 500px;
- }