Change image in HTML page every few seconds

by

As I posted in the comment you don’t need to use both setTimeout() and setInterval(), moreover you have a syntax error too (the one extra }). Correct your code like this:

(edited to add two functions to force the next/previous image to be shown)

<!DOCTYPE html>

<html>
   <head>
      <title>change picture</title>
      <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          function startTimer() {
              setInterval(displayNextImage, 3000);
          }

          var images = [], x = -1;
          images[0] = "image1.jpg";
          images[1] = "image2.jpg";
          images[2] = "image3.jpg";
      </script>
   </head>

   <body onload = "startTimer()">
       <img id="img" src="https://stackoverflow.com/questions/13975891/startpicture.jpg"/>
       <button type="button" onclick="displayPreviousImage()">Previous</button>
       <button type="button" onclick="displayNextImage()">Next</button>
   </body>
</html>

More Related Contents:

  1. How can I modify with css an image appended with javascript?
  2. Programmatically change the src of an img tag
  3. Resize image with javascript canvas (smoothly)
  4. Browser/HTML Force download of image from src=”data:image/jpeg;base64…”
  5. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  6. how to show alternate image if source image is not found? (onerror working in IE but not in mozilla) [duplicate]
  7. execute function after complete page load [duplicate]
  8. How to silently hide “Image not found” icon when src source image is not found
  9. Dynamically resizing Image-maps and images
  10. How to save a base64 image to user’s disk using JavaScript?
  11. How to display image with JavaScript?
  12. Detecting WebP support
  13. Disable dragging an image from an HTML page
  14. Adding images to an HTML document with JavaScript
  15. How do I abort image load requests without using window.stop()
  16. Load image from url and draw to HTML5 Canvas
  17. Executing JavaScript after X seconds
  18. Create a simple 10 second countdown
  19. Make image fill div completely without stretching
  20. img onload doesn’t work well in IE7
  21. How to download a base64-encoded image?
  22. JavaScript loading progress of an image
  23. Is there a way to load images to user’s cache asynchronously?
  24. JavaScript: Get image dimensions
  25. Sort by image resolution in gallery
  26. Is it necessary to set onload function before setting src for an image object?
  27. createImageBitmap alternative on Safari
  28. How to bind img src to data in Vue
  29. Center an Image vertically and horizontally using CSS
  30. canvas- Cropping images in different shapes

Leave a Comment