这篇文章主要介绍了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