刷新页面时随机背景？

Question

我有 14 张图片，我希望页面在 loaded/refreshed 时随机 select 其中一张。

在我决定要使用这些图像之前，我有一个带有以下 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

这将 return 你一个介于 0 和 13 之间的数字。之后，你可以使用 element.style.backgroundImage() 在 onload 事件上更改它

window.onload = 初始化

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>

刷新页面时随机背景？

Random background when you refresh the page?

javascript

css

jquery

background

background-image