在皮肤『QQ Style』中我使用了随机背景切换功能，这个随机背景切换是一个独立的功能，上面使用的只是其中一小部分应用。下面我将演示背景随机切换的更多应用，然后大家就可以有更多的拓展。
第一：背景图片重复铺满屏幕并随着文字一起运动
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>背景图片随机切换(1)</title>
</head>
<body>
<script language="JavaScript">
bg = new Array(2);
bg[0] = 'https://img.weisay.com/weiimg/article/307_1.jpg'
bg[1] = 'https://img.weisay.com/weiimg/article/307_2.jpg'
bg[2] = 'https://img.weisay.com/weiimg/article/307_3.jpg'
var index = Math.floor(Math.random() * bg.length);
document.body.background = bg[index];
</script>
<a href="/blog/background-image-randomly-switching.html">背景图片随机切换</a><br />
刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
</body>
</html>
第二：背景图片重复铺满屏幕但不随着文字一起运动
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>背景图片随机切换(2)</title>
</head>
<body>
<script language="JavaScript">
bg = new Array(2);
bg[0] = 'https://img.weisay.com/weiimg/article/307_1.jpg'
bg[1] = 'https://img.weisay.com/weiimg/article/307_2.jpg'
bg[2] = 'https://img.weisay.com/weiimg/article/307_3.jpg'
var index = Math.floor(Math.random() * bg.length);
document.body.background = bg[index];
document.body.style.backgroundAttachment = "fixed";
</script>
<a href="/blog/background-image-randomly-switching.html">背景图片随机切换</a><br />
刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
</body>
</html>
第三：背景图片不重复并位于浏览器左边(局右可以自己推导)
方法一(图片随着文字一起运动)
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>背景图片随机切换(3.1)</title>
</head>
<body>
<script language="JavaScript">
bg = new Array(2);
bg[0] = 'https://img.weisay.com/weiimg/article/307_1.jpg'
bg[1] = 'https://img.weisay.com/weiimg/article/307_2.jpg'
bg[2] = 'https://img.weisay.com/weiimg/article/307_3.jpg'
var index = Math.floor(Math.random() * bg.length);
document.body.style.background = "url("+bg[index]+") no-repeat top left"
</script>
<a href="/blog/background-image-randomly-switching.html">背景图片随机切换</a><br />
刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
</body>
</html>
方法二(图片不随着文字一起运动)
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>背景图片随机切换(3.2)</title>
</head>
<body>
<script language="JavaScript">
bg = new Array(2);
bg[0] = 'https://img.weisay.com/weiimg/article/307_1.jpg'
bg[1] = 'https://img.weisay.com/weiimg/article/307_2.jpg'
bg[2] = 'https://img.weisay.com/weiimg/article/307_3.jpg'
var index = Math.floor(Math.random() * bg.length);
document.body.style.backgroundImage = "url("+bg[index]+")";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundAttachment = "fixed";
</script>
<a href="/blog/background-image-randomly-switching.html">背景图片随机切换</a><br />
刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
</body>
</html>
第四：背景图片不重复并位在浏览器居中顶部显示
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>背景图片随机切换(4)</title>
</head>
<body>
<script language="JavaScript">
bg = new Array(2);
bg[0] = 'https://img.weisay.com/weiimg/article/307_1.jpg'
bg[1] = 'https://img.weisay.com/weiimg/article/307_2.jpg'
bg[2] = 'https://img.weisay.com/weiimg/article/307_3.jpg'
var index = Math.floor(Math.random() * bg.length);
document.body.style.backgroundImage = "url("+bg[index]+")";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundAttachment = "fixed";
document.body.style.backgroundPositionX = "center";
</script>
<a href="/blog/background-image-randomly-switching.html">背景图片随机切换</a><br />
刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
<p style="text-align:center">威言威语</p>
</body>
</html>
当然还可以扩展，自己动手吧！
叔叔好厉害！！护照都盖章太多换了一本
开心！
这个不错，我收藏一下。
用JS随机产生图片数组的Index ，然后在背景设置中调用Index对应的图片~
背景图片的随机变化, 最好用 CSS+ASP 来实现. 这样无需改动源码. 只需要用 CSS 设定背景图片地址为特殊的 ASP 程序, 用 ASP 来选择使用的背景图片即可.
不错