的setInterval进入无限循环

Question

她是我的4张图片setinternal新代码。但是，我试图让相同图像的无限循环。你能帮我理解如何创建一个setInterval循环。

<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> 

我只是想出如何做出更长的循环。但是，我的图像显示已损坏？

<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> 

我弄清楚为什么图像坏了。它缺少这个imgURLS[imgIndex]

新的代码是：

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

Answer 1

下面是与setTimeout一个简单的方法。

1）id添加到您的包含div和目标吧。

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

2）使用setTimeout重复调用与count增量相同的循环功能。如果count等于图像数组的长度，则将其设置为零。

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