js html 加背景图片,利用js实现随机背景显示，每次访问背景图都不一样

这篇文章主要介绍了js实现网页随机切换背景图片的方法,涉及数组、随机函数与css样式的调用技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现网页随机切换背景图片的方法。分享给大家供大家参考。具体实现方法如下：

首先要准备一些图像，图像的大小(无论是尺寸大小还是数据大小)要控制好，如果太大，会使用户等不及查看全图就跳出了，如果太小，又会影响页面质量。

把准备好的图像全部放到一个目录下，且格式统一，名字前缀也要统一，名字后缀用数字按照图片总数量按顺序一个一个的命名，参考我的：

推荐格式：前缀名_数字.jpg

这些图片在网站指定的一个目录下喔，推荐新建一个目录存储。

然后参考你网站页面的背景图css样式，用js输出你网站相同的css样式，并集成到以下js代码中：

//

var randomBgIndex = parseInt(121*Math.random());

document.write('');

//]]>

注明：121是图片总数量，randomBgIndex是取得0到总数量之间的随机数，是输出的css背景样式，请根据你网站背景css样式修改。

然后把修改好的js代码添加到页面底部Body之前就OK了。

注意合理调节图片尺寸和质量避免网页加载过慢。建议单个图片500kb以内，尺寸1920*1080，且css定义背景图完全拉伸不平铺。

小伟博客网 http://www.mlwei.com