setInterval into Infinity loops

Question

Her is my new code with setinternal of 4 images. However, I am trying to have an infinite loops of the same images. Can you help me to understands how to create a setInterval loop.

<script type="text/javascript" >
    var OpenWindow = window.open("","","top=100, left=400,resizable=yes,height=550,width=550,menubar=yes,location=yes,resizable=yes,scrollbars=yes");

    var imgURLS = ['Oculus.jpg', 'future-vr.jpg', 'morpheus.jpg', 'samsungvr.jpg'];
    var imgIndex = 0;

    var timer = setInterval(function() {
            for (var imgIndex = 0; j < imgURLS.length; j++)
            {
             for (var imgIndex = 0; i < imgURLS.length; i++)
             {
            clearInterval(timer);
        } else {
OpenWindow.document.write("<div class='css-slideshow'>");
OpenWindow.document.write("<figure>");
OpenWindow.document.write('<img src ="' + imgURLS[imgIndex++] +  '">');
OpenWindow.document.write("</figure>");
OpenWindow.document.write("</div>");
        }
    }, 3000);

    </script>

I just figure out how to make longer loops. However, my images are showing broke?

<script type="text/javascript" >
    var OpenWindow = window.open("","","top=100, left=400,resizable=yes,height=550,width=550,menubar=yes,location=yes,resizable=yes,scrollbars=yes");

    var imgURLS = ['Oculus.jpg', 'future-vr.jpg', 'morpheus.jpg', 'samsungvr.jpg'];
    var imgIndex = 0;

    var i = setInterval(function() {
            imgIndex++;
    if(imgIndex === 20) {
        clearInterval(i);
        } else {
OpenWindow.document.write("<div class='images-1'>");
OpenWindow.document.write('<img src ="' + imgURLS.length +  '">');
OpenWindow.document.write("</div>");
        }
    }, 3000);
    </script>

I figure out why the image were broke. it was missing this imgURLS[imgIndex]

new code is:

OpenWindow.document.write('<img src ="' + imgURLS[imgIndex] +  '">');
OpenWindow.document.write('<img src ="' + imgURLS.length +  '">');

I see an `else` with no `if` - infinite loops require infinite resources and infinite time, are you sure you want to go there? — Jaromanda X, Dec 05 '15 at 06:46
@JaromandaX4 I think that is the only way to make the image loops. None stop from image 1 to 4?sorry for`else`.It is not supposed to be there. — Sow, Dec 05 '15 at 06:49
you want to change the image in the new window every 3 seconds - forever looping through 4 images - is that correct? — Jaromanda X, Dec 05 '15 at 06:51
@JaomandaX Yes! Can you? since guest271314 suggested to do an CSS animation? — Sow, Dec 05 '15 at 06:58
This answer could be useful: https://stackoverflow.com/questions/5835126/javascript-infinitely-looping-slideshow-with-delays/5835336#5835336 — ge333, May 08 '22 at 17:29

score 0 · Answer 1 · answered Dec 05 '15 at 07:51

0

Here's a simple way with setTimeout.

1) Add an id to your containing div and target it.

var image = document.querySelector('#css-slideshow img');

2) Use setTimeout to repeatedly call the same loop function with increments of count. If count equals the length of the images array, set it to zero.

function carousel() {
  var timer, count = 0;
  var loop = function loop(count) {
    if (count === imgURLS.length) count = 0;
    image.src = imgURLS[count];
    timer = setTimeout(loop, 2000, ++count);
  }
  loop(count);
}

carousel();

DEMO

answered Dec 05 '15 at 07:51

Andy

61,948
13
68
95

thanks! it is working well, but i need to have it into a `window.open` basically. Maybe i can try to see how to add some of your codes into mine and this can improve the one have at the moment. Any suggestion concerning my codes? – Sow Dec 05 '15 at 08:04
Do this on the image var, add OpenWindow.document.querySelector bit – MasterT Dec 05 '15 at 08:53

setInterval into Infinity loops

1 Answers1