HOME » 分享类 » 「JS」实现网页随机切换背景图片

May 22, 2018

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

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

本文实例讲述了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定义背景图完全拉伸不平铺。

共有 4 条评论

默认头像
支持markdown语法
  1. 云南普洱茶
    云南普洱茶 2018年10月21日

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

    回复
  2. 网络营销
    网络营销 2018年07月17日

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

    回复
  3. 精斑检测
    精斑检测 2018年07月16日

    完美啊

    回复
  4. Alone88
    Alone88 2018年07月13日

    参考一下!

    回复
果青小站

果青

嘀嗒的雨点,溅起一圈圈如凄美回忆般的涟漪。