利用JS实现网站随机背景图显示

小编

发表文章数:84

热门标签

首页 » WordPress » 利用JS实现网站随机背景图显示

这篇文章主要介绍了 js 实现网页随机切换背景图片的方法,涉及数组、随机函数与 css 样式的调用技巧,

非常具有实用价值,需要的朋友可以参考下

首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,

会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量。
把准备好的图像全部放到一个目录下,且格式统一,名字前缀也要统一,

名字后缀用数字按照图片总数量按顺序一个一个的命名,参考我的:

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

利用JS实现网站随机背景图显示

然后参考你网站页面的背景图 css 样式,用 js 输出你网站相同的 css 样式,

并集成到以下 js 代码中:TP框架 建议把图片放到模板根目录 图片路径可调用__HOME__/images/

注明:10 是图片总数量,randomBgIndex 是取得 0 到总数量之间的随机数,

是输出的 css 背景样式,请根据你网站背景 css 样式修改。

然后把修改好的 js 代码添加到使用模板中base.html页面 Body 之前就 OK 了。

注意合理调节图片尺寸和质量避免网页加载过慢。

建议单个图片 500kb 以内,尺寸 1920*1080,且 css 定义背景图完全拉伸不平铺。

标签:

未经允许不得转载:作者:小编, 转载或复制请以 超链接形式 并注明出处 守望者软件开发工作室
原文地址:《利用JS实现网站随机背景图显示》 发布于2020-01-27

分享到:
赞(0) 生成海报

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册