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

所以我有一个网站，我们有一个我们随时都会改变的背景图像。我们也有一个模糊的图像版本，我们创建的图像是在后面设置的，所以当窗口等太大时，模糊的图像会延伸到两侧。见截图使用JavaScript来选择页面加载时的随机图像，但使这个随机图像加载第二个特定图像

我们希望主阵地形象从一组5张图像的每一个页面加载随机挑选，但是对于主图像的特定模糊图像需要也是它的后面。什么一段代码可以用来

选择一个随机图像显示，并
然后有它背后对应的模糊图像负荷？

来源

2015-09-23 Antoni Leonard

1：JS的一点点就足够了 2：无需代码/脚本，只要有你的模糊图像那里用纯html或css – S200

的一段代码应该是这样的（你可以将其粘贴在你的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()产生一个随机值
使用生成的随机值作为图像阵列的索引，并将其设置为背景

来源

2015-09-23 03:38:12 Buzinas

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

回答

相关问题