时间戳

首页 > 解决方案 > 如何从文件夹动态加载图像，而不是在数组中输入每个图像名称？

javascript - 如何从文件夹动态加载图像，而不是在数组中输入每个图像名称？

问题描述

我将文件夹中的每个图像手动放入数组中。有没有办法动态地做到这一点，但只使用 for 循环遍历文件夹中的图像？

索引.html

<div class = "TestRotator">
<img src = "/Users/loh/Documents/ElectronJS/newapp1/newapp1/pages/images/Fib.png", height="300" id="rotator">
</div>

JS

<script type="text/javascript">
(function () {
    var rotator = document.getElementById('rotator'); // change to match image ID
    var imageDir = '/Users/loh/Documents/ElectronJS/newapp1/newapp1/pages/images/';
    var delayInSeconds = 5;
    // set number of seconds delay
    // list image names
    var images = ['Camel.png', 'Noose.png', 'Sphinx.png'];
    var num = 0;
    var changeImage = function () {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
})();
</script>

标签： javascript

解决方案

一种选择是重命名图像，例如 fromCamel.png和Noose.pngto0.png和1.png。然后你可以这样做：

let currentIndex = 0;
const totalImages = 3;
const changeImage = function () {
    num = (num + 1) % totalImages;
    rotator.src = imageDir + num + '.png';
};

另一种选择，如果您可以将图像托管在服务器上（在本地主机上或在某处的互联网上），您可以在服务器上添加一个路由，允许客户端 JS 直接请求图像中所有文件的列表，然后遍历它。可以让您执行以下操作的东西：

fetch('get-image-file-names')
  .then(res => res.json())
  .then((images) => {
    const rotator = document.getElementById('rotator');
    // etc; now use the `images` variable, which is an array of image names
    // sent to the client by the server
  });

推荐阅读