如何使用 JavaScript 将每天的多张图像更改为同一文件夹中的不同图像？

Question

我想再更详细地尝试一下，所以我有一个主页上有多个图像的网站，我每周都会从包含 500 多个图像的图像文件夹中手动更改这些图像，有没有一种方法可以使用 javascript 每天执行此操作它改变了不同的图像，有点像将所有图像链接存储在 JavaScript 文件中，这有意义吗？

这里是显示每个部分的代码，请查看网站页面，以便您可以更多地了解我的意思 richbones dot com

<h3 class="no-title">Recently Added</h3>
        <div class="no">
            <img src="images/move.png" alt="">
            <a href="files/jamaledwards"><img src="images/deadhome/jamaledwards.png" alt=""></a>
            <a href="files/margaretjohn"><img src="images/deadhome/margaretjohn.png" alt=""></a>
            <a href="files/michaelgambon"><img src="images/deadhome/michaelgambon.png" alt=""></a>
            <a href="files/halroach"><img src="images/deadhome/halroach.png" alt=""></a>
            <a href="files/genekelly"><img src="images/deadhome/genekelly.png" alt=""></a>
            <a href="files/petercushing"><img src="images/deadhome/petercushing.png" alt=""></a>
            <a href="files/jimhenson"><img src="images/deadhome/jimhenson.png" alt=""></a>
            <a href="files/hennyyoungman"><img src="images/deadhome/hennyyoungman.png" alt=""></a>
            <a href="files/donaldpleasence"><img src="images/deadhome/donaldpleasence.png" alt=""></a>
            <a href="files/brookemccarter"><img src="images/deadhome/brookemccarter.png" alt=""></a>
            <a href="#search22"><img src="images/search.png" alt=""></a>
        </div>
    </div>

Answer 1

您可以为所有图像提供 ID 并使用它 document.getElementById("image-id").src= "../template/save.png";

同时在图像文件名中添加索引 并创建一个函数，该函数应该有一个 for 循环，可以将随机图像分配给 img.scr，如下所示： document.getElementById("image-id").src= "../template/save[index].png ”;

Answer 2

您可以创建一个存储所有图像的数组

const images = ["name", "nameA", "nameB", "..."]

然后创建一个函数来处理您想要在网站上显示的图像数量，并提供两个参数，第一个是数组本身和您想要显示的图像数量。这里我们可以使用javascript切片方法来选择随机图像

const selectImages = (images, gap) => {
    const firstImg = Math.floor(Math.random() * (images.length - gap) + 1)
    const lastImg = firstImg - gap

    return images.slice(firstImg, lastImg)
}

现在使用

setInterval()

方法执行 selectImages 函数并使用 DOM Manipulation 每天更新 html

setInterval(() => {
    const selectedImages = selectImages(images, 10)
    
    // looping the selected images and do DOM Manipulation
}, 24 * 60 * 60 * 1000)

我相信有更方便的方法来完成这项任务。