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

投稿作者:爱你丶朕做不到哇 围观人数:130 回复次数:0

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

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

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

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

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

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


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

并集成到以下 js 代码中:  

爱狐CMS 内容管理系统的用户,建议把图片放到模板根目录 图片路径可调用__HOME__/images/

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

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

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

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

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


下载权限:免费下载  | 已有 3 位网友下载了该资源!
已通过安全检测
the end
免责声明:本文来自爱狐资源网发布,但不代表本站的观点和立场。
我要评论 0条评论
匿名用户
    最新评论
Welcome

登录您的账号