Home/ Questions/Q 8597411
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T00:54:26+00:00

I am programming a very simple JavaScript slideshow and it isn’t working. I do

  • 0

I am programming a very simple JavaScript slideshow and it isn’t working. I do not want jQuery. This code displays the first image after 5 seconds, however does not cycle through the rest of the images. The full code is as follows, I just can’t figure out what I am doing wrong:

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <title>JavaScript Slideshow</title>
        <style>
        #slider > img { display: none }
        </style>
    </head>
    <body>
        <div id="slider">
            <img src="img1.png">
            <img src="img2.png">
            <img src="img3.png">
            <img src="img4.png">
            <img src="img5.png">
        </div>
        <script>
            var s = document.getElementById("slider").getElementsByTagName("img");
            var c = s.length;
            setInterval(function() {
                s[(s.length++) % c].style.display="block";
            }, 5000);
        </script>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code has several errors in it.

    1. You’re trying to increment the array length, and modulo it by the counter. I bet you wanted to do that the other way around:

      s[c % (s.length)].style.display="";

    2. You’re not hiding the images already cycled through, so your cycle will only display once. 

          var s = document.getElementById("slider").getElementsByTagName("img");
    var c = s.length;
    setInterval(function() {
        s[c % s.length].style.display="";
        s[(++c) % s.length].style.display="block";
    }, 5000);
    • 0