Question

她是我的新代码，其中包含4张图片。但是，我试图拥有相同图像的无限循环。你能帮我理解如何创建一个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重复调用相同的循环函数，增量为{{1}}。如果count等于images数组的长度，请将其设置为零。

count

DEMO

setInterval到Infinity循环

1 个答案: