使用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";
	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的网站的刷新切换主题同样可以用这个方法来实现。

原载于:雨夜带刀’s Blog
本文链接:https://blog.yiguochen.com/random-bodybg.html
如需转载请以链接形式注明原载或原文地址。

“使用JavaScript实现随机切换网页背景图”目前已有 6 条评论