使用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()生成随机值
• 使用生成的随机值作为图像数组的索引，并将其设置为背景