Question

我正在寻找一种方法将所有图像放入一个数组，然后在'幻灯片放映'中使用它们......到目前为止我所拥有的内容：

HTML

<div id="header">
</div>

JS

function onload() {
    var i = 0;
    var imageList= [<?php
        $dir='/assets/splashs/';
        $files = scandir($dir);
            foreach((array)$files as $file){
                if($file=='.'||$file=='..') continue;
            $fileList[]=$file;
        }
    ?>];

    setInterval(function() {
        document.getElementById("header").style.backgroundImage="url(imagelist+i)";
        i++
    },3000);
}

注意：imagelist取自另一个帖子

编辑：

我收到错误：Uncaught SyntaxError: Unexpected token < global.js:3

目前的代码不起作用，所以我想知道你们中是否有任何不同或能够修复它？

Answer 1

可能问题在于：

document.getElementById("header").style.backgroundImage="url(imagelist+i)";

应改为

document.getElementById("header").style.backgroundImage="url("+imagelist[i]+")";

希望它有所帮助。

Answer 2

     function onload() {
         var i = 0;
         var imageList = [ <?php echo implode(",", glob('./assets/splashs/*.*')); ?> ];

         setInterval(function () {
             document.getElementById("header").style.backgroundImage = "url("+imagelist[i]+")";
             if (i === (imageList.length - 1)) {
                 i = 0;
             } else {
                 i++
             }
         }, 3000);
     }

我在显示数组中的最后一个图像时添加了一个重置，它返回到第一个。 +整理你的图像循环。

使用javascript将图像放入数组？

2 个答案: