使用JavaScript实现随机切换网页背景图

每刷新一次页面，就切换一个背景图，并且切换的顺序是随机的，第一次看到这个效果的时候虽然觉得这个效果有点意思，但并没有深究。直到前不久看到当哥的JavaScript视频教程时，才突然有了灵感，原来实现这个效果是这么的简单。

先看看演示效果：

查看演示

你可以准备很多张背景图，并且背景图的切换都是随机的，不过由于每次刷新一次页面都会加载一个背景图片，这在一定程度上增大了服务器的负载。不过这些都不是本文讨论的范畴，看看下面的JavaScript代码：

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

这里使用了Math对象生成一个随机数并赋值给变量randomBgIndex，random方法可以生成一个0~1之间的随机数，比如0.035747419168668415，得到的这个随机数再于4相乘，结果就成了0~4的一个随机数，然后使用round方法对这个随机数进行四舍五入就得到了一个整数。这样0~4的一个随机整数就可以生成了，这个随机数是随机切换背景效果的关键所在。

得到了随机数，接下来再声明一个数组变量用来存储背景图片的路径：

     var bodyBgs = []; //创建一个数组变量来存储背景图片的路径
        bodyBgs[0] = "images/bg1.jpg";


    buy cigarettes online

        bodyBgs[1] = "images/bg2.jpg";
        bodyBgs[2] = "images/bg3.jpg";
        bodyBgs[3] = "images/bg4.jpg";
        bodyBgs[4] = "images/bg5.jpg";

我这里演示只用了5张背景图片，背景图片的数量是不受限制的，可以是N张，只要更改相应的随机数的倍数即可，比如将上面的倍数4改成倍数9就可以得到一个0~9的随机数，这样就可以设置10张背景图。

有了随机数，有了图片路径这个效果就差不多了，最终的代码如下：

很有意思的一个效果，但是实现起来却如此简单，如果再加以扩展，还可以刷新切换网站主题，刷新切换Banner等，MTV的网站的刷新切换主题同样可以用这个方法来实现。

zp8497586rq