May 22, 2018

「JS」实现网页随机切换背景图片

分类:分享类 · 评论:4 条 · 热度:2033℃

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

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

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

推荐格式:前缀名_数字.jpg
这些图片在网站指定的一个目录下喔,推荐新建一个目录存储。

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

//<!CDATA[
    var randomBgIndex =  parseInt(121*Math.random());
    document.write('<style> body.login{background: rgba(255, 255, 255, 0.0) url("图片目录路径/前缀名'+ randomBgIndex +'.jpg"); background-size:100% 100%; background-repeat:no-repeat;}</style>');
//]]>

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

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

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

  1. 挺好,收藏备用,谢谢分享

  2. 厉害哦,大佬,又学到一招

  3. 参考一下!