Image Rotator using Javascript

Question

Im tryin to create an image rotator where an image will change every 3 seconds.But the problem is, images aren't showing up. Here is my code:

    <html>


<script type='text/javascript'>

    var myScreen=document.getElementById("banner");
    var pictures=['stephIrv.jpg','pintball.jpg','badminton.jpg','running.jpg','boxing.jpg'];
    var ttlPics = pictures.length;
    var i=0;
    function slideShow()
    {
        if(i > (ttlPics - 1))
        {
            i=0;
        }
        myScreen.innerHTML = '<img src="'+pictures[i]+'">';
        i++;
        loopTimer = setTimeout(slideShow,3000);
    }
    slideShow();
</script>
<body>

<div id = 'banner'></div>


</body>

</html>

The first argument in setTimeout has to be a variable not a string. You don't have a loop function declared anywhere either. — Daniel Lizik
– Daniel Lizik, Commented Dec 7, 2015 at 19:08

Guido Kitzing · Accepted Answer · 2015-12-07 19:08:58Z

1

Your pictures need to be inside the same folder, as your script. But I guess you have that already.

First thing I would change, is to use slideShow in setTimeout instead of 'loop()'?

loopTimer = setTimeout(slideShow, 3000);

Hope that helps.

answered Dec 7, 2015 at 19:08

Guido Kitzing

8925 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Guido Kitzing Over a year ago

You are using 'slideShow()' in setTimeout as first parameter, try changing that to slideShow without the single-quotes and without the (). Just as I suggested in my answer. You need to use a callback here, not a string.

Guido Kitzing Over a year ago

Can you share, what is happening, please? Are there any error-messages in your browser-console? What is missing?

juju17 Over a year ago

There are no error message appearing in my browser. When I run my code, the browser is just a blank white space. No images are appearing.

juju17 Over a year ago

UPDATE! I got it working by putting the entire <script> tag in the <body> after the <div>. Thanks for the help :)

Guido Kitzing Over a year ago

Okay. When testing it, I actually did the same, but missed the point. Congrats!

|

Collectives™ on Stack Overflow

Image Rotator using Javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related