使用JavaScript在页面加载时选择随机图像，但使随机图像加载第二个特定图像

Question

所以我有一个网站，我们有一个背景图像，我们时不时地改变。我们还创建了一个模糊的图像，我们创建的图像设置在后面，所以当窗口等太大时，模糊的图像延伸到两侧。见截图

我们希望主正面图像从一组5个图像中随机选取每个页面的负载，但该主图像的特定模糊图像也需要在其后面。

可以使用哪些代码

1. 选择要显示的随机图片，
2. 然后在它后面有相应的模糊图像负载？

Answer 1

这段代码应该是这样的（您可以将其粘贴到HTML文件中的任何位置）：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var images = ['sky.jpg', 'ocean.jpg', 'mountain.jpg', 'road.jpg', 'food.jpg'];
    var blurredImages = ['sky_b.jpg', 'oce_b.jpg', 'mou_b.jpg', 'roa_b.jpg', 'foo_b.jpg'];

    var rnd = Math.floor(Math.random() * 5);

    document.body.style.backgroundImage = images[rnd];
    document.getElementById('mainDiv').style.backgroundImage = blurredImages[rnd];
  });
</script>

<强>步骤

• 将图像和等效的模糊图像放入两个数组中
• 通过调用Math.random()
生成随机值
• 使用生成的随机值作为图像的索引＆＃39;数组，并将它们设置为背景