的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