Question

我有14张图片，我希望页面在加载/刷新页面时随机选择其中一张。

在我决定使用这些图像之前，我有一个带有以下CSS代码的背景，并且它工作得很好，我也希望将它用于这些新图像：

 #bg {position:fixed; top: 0px; width:100%; height:100%; background: url('http://i.imgur.com/B8ubW70.jpg') center center no-repeat; background-size: cover; }

<div id="bg"></div>

Answer 1

您可以使用Math.random（）来获取随机图片索引。

在你的情况下，如果你有14张照片，请使用：

var picno = (Math.random() * 100) % 14

这将返回0到13之间的数字。之后，您可以使用element.style.backgroundImage()在onload事件上更改它

window.onload = init

function init() {
    element.style.backgroundImage = url(pic_path_array[picno]);
}

Answer 2

我的解决方案使用JavaScript。

您首先使用图片创建了bgimg文件夹：

> index.html 
> bgimg (folder)
> -- 1.jpg
> -- 2.jpg
> -- 3.jpg
> -- ......

并使用以下JavaScript：

<html>
<head>
<script type="text/javascript">
var totalCount = 8;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimg/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// Background repeat
}
</script>
</head>
<body>
// Page Design
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>

刷新页面时的随机背景？

2 个答案: