网页html随机切换背景图片

1. 首先要准备一些图像，图像的大小（不管是尺寸大小仍是数据大小）要控制好，若是太大，会使用户等不及查看全图就跳出了，若是过小，又会影响页面质量。

2. 在script中将这些图像编为一个数组，便于调用。数组的长度固然就是图像的数量。

var bodyBgs = []; //建立一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyBgs[1] = "images/02.jpg"; bodyBgs[2] = "images/03.jpg"; bodyBgs[3] = "images/04.jpg"; bodyBgs[4] = "images/05.jpg";

1. 由于上面用到了5个图像，因此在这里须要产生一个0到4的随机数。若是数组长度不同，修改下面代码中的乘数就能够。

var randomBgIndex = Math.round( Math.random() * 4 );

1. 核心的程序就是这些。尽管很简单，倒是一种小小的思路，若以此为基础，经过加工能够作出一些扩展功能。好比：主题切换以及其它的随机呈现等等。下面是完整的JS代码。

http://www.9958.pw/post/html_backimage_random <script type="text/javascript"> //<!CDATA[ var bodyBgs = []; bodyBgs[0] = "images/01.jpg"; bodyBgs[1] = "images/02.jpg"; bodyBgs[2] = "images/03.jpg"; bodyBgs[3] = "images/04.jpg"; bodyBgs[4] = "images/05.jpg"; var randomBgIndex = Math.round( Math.random() * 4 ); //输出随机的背景图 document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0}</style>'); //]]> </script>