当前位置:首页 > 新闻资讯 > 使用说明 > 首页轮播图管理

首页轮播图管理

[导读]:操作入口:后台 > 系统管理 > 首页轮播图

首页轮播图管理

操作入口:后台 > 系统管理 > 首页轮播图

💡
什么是首页轮播图? 首页轮播图是网站首页顶部自动切换的广告图片区域,用于展示重要推广内容、活动信息等。与系统Banner(子页面固定单图)不同,轮播图支持多张图片自动轮播切换。

操作步骤

1
进入轮播图管理页面

登录后台管理系统,在左侧菜单中点击「首页轮播图」进入管理页面。

admin/banner.php
系统设置
网站设置
系统Banner设置
邮件设置
轮播图
首页轮播图
产品系统
添加产品
产品列表
首页轮播图管理

当前页面显示轮播图列表

1
点击首页轮播图
在左侧菜单中点击「首页轮播图」进入轮播图管理页面
2
添加新轮播图

点击页面上的「添加轮播图」按钮,在弹出的表单中填写以下信息:

admin/banner.php?action=add
轮播图标题
春季促销活动
链接地址
/product/detail.php?id=1
轮播图片
+ 点击上传图片(推荐 1920×500px)
排序值
0
状态
启用
1
轮播图标题
填写轮播图标题,便于后台管理识别
2
链接地址
点击轮播图跳转的URL,可留空
3
上传轮播图片
点击上传区域选择图片,推荐尺寸 1920×500px
4
排序值
数值越小越靠前显示
5
状态
选择「启用」或「禁用」,禁用后前台不显示
💡
链接地址可留空,留空时点击轮播图不会跳转。如需跳转,请填写完整的URL地址或站内相对路径。
3
编辑已有轮播图

在轮播图列表中,找到需要编辑的轮播图,点击右侧的「编辑」按钮,即可进入编辑模式修改各项信息。

admin/banner.php
ID 图片预览 标题 排序 状态 操作
1
轮播图1
春季促销活动 0 启用 编辑 删除
2
轮播图2
新品发布 1 启用 编辑 删除
1
点击编辑按钮
在轮播图列表中,点击对应行的「编辑」按钮进入编辑模式
4
删除轮播图

在轮播图列表中,点击需要删除的轮播图右侧的「删除」按钮,系统会弹出确认对话框,确认后才会执行删除操作。

admin/banner.php
ID 图片预览 标题 排序 状态 操作
1
轮播图1
春季促销活动 0 启用 编辑 删除
1
点击删除按钮
点击「删除」按钮,系统会弹出确认对话框,确认后执行删除
!
注意:删除操作不可恢复,请谨慎操作。建议删除前先禁用轮播图,确认前台不再需要后再执行删除。
5
排序规则说明

轮播图的显示顺序由「排序值」决定,排序值越小越靠前显示。

admin/banner.php
ID 标题 排序值 显示位置
1 春季促销活动 0 第 1 个显示
2 新品发布 1 第 2 个显示
3 关于我们 2 第 3 个显示
1
排序值 0
数值最小,排在第1位显示
2
排序值 1
排在第2位显示
3
排序值 2
排在第3位显示,数值越大越靠后
💡
排序值可以使用任意整数(包括负数),系统会按从小到大的顺序排列。如果多条记录排序值相同,则按添加时间排序。
6
启停控制

每条轮播图都可以单独设置启用或禁用状态。禁用后该轮播图不会在前台显示,但数据仍保留在后台,方便随时重新启用。

admin/banner.php
ID 标题 状态
1 春季促销活动 启用
3 关于我们 禁用
1
启用状态
轮播图参与自动轮播,访客可以看到
2
禁用状态
轮播图被隐藏,但数据保留在后台,可随时重新启用
💡
建议使用「禁用」代替「删除」来临时隐藏轮播图,这样需要时可以随时重新启用,无需重新上传图片。

图片规格建议

1920px
500px
重要内容区域
中间 1200px
全宽 1920px
项目 建议值 说明
图片尺寸 1920 × 500px 适配主流显示器宽度
图片格式 JPG / PNG JPG适合照片类,PNG适合含文字或透明背景
文件大小 < 500KB 过大会影响首页加载速度
安全区域 中间 1200px 重要文字和按钮放在中间1200px范围内,避免被裁切
!
重要:由于不同屏幕尺寸差异,轮播图两侧可能被裁切。请确保所有重要内容(文字、按钮、Logo等)放置在中间 1200px 范围内,以保证在各种设备上均可正常显示。

前台显示流程

✏️
后台修改
轮播图数据
💾
写入
lb.txt 文件
🖥️
前台读取
渲染轮播
👁️
用户看到
轮播效果
提示:修改轮播图后刷新首页即可看到效果。如果未看到变化,请按 Ctrl + F5 强制刷新浏览器缓存。
免责声明:转载请注明出处:https://www.jianfu.ltd/news/295

多一份参考总有益处

免费试用7天,满意再付款。