悬浮条轮播模式

什么是轮播模式

轮播模式可以把一条悬浮条（固定栏）变成多张幻灯片，在同一条悬浮条中自动或手动切换展示。当你有多个卖点、多张优惠券或多条公告想要在一条有限的横幅里依次呈现时，轮播模式非常合适。

常见使用场景：

• 多个促销卖点循环展示，让用户在不占用更多页面空间的前提下看到更多信息；

• 多张优惠券 / 活动轮流曝光；

• 公告、通知滚动播报。

提示：关闭轮播模式时，系统会保留当前正在编辑的这张幻灯片作为普通的静态悬浮条，其余幻灯片会被删除。

开启轮播模式

在悬浮条编辑器中，通过操作工具条上的 「轮播模式」 开关即可开启或关闭轮播。

轮播布局：全宽 / 内容居中

轮播布局决定了整条轮播条的整体呈现思路，建议先确定布局，再去编辑各张幻灯片。在「轮播设置」顶部即可选择：

全宽（默认）

每张幻灯片的背景铺满整条悬浮条，切换时整条一起滑动——背景和内容作为一个整体左右（或上下）切换。

• 适用场景：每屏是一套完整的整屏视觉、且各屏风格/背景不同。例如多张不同主视觉的促销 Banner（红色大促屏 → 黑色新品屏 → 绿色会员屏）轮流展示，想让整条横幅整体焕新。

• 视觉特点：切换时你能看到整条背景跟着一起动。

内容居中

整条悬浮条使用一层统一背景（铺满全宽、切换时不动），只有内容和左右箭头在中心的一个固定宽度内滑动切换。

• 适用场景：想保持整条统一底色/品牌色（如全宽黑条），只轮播其中的文案 / 信息，视觉更克制统一；适合公告轮播、多条卖点文字轮播，或宽屏下不希望内容被拉得太散。参考电商站常见的顶部通知条（全宽深色条 + 中间文字带左右箭头切换）。

• 视觉特点：背景固定不动（全宽统一底色），只有中间内容在切换，两侧留白仍是统一底色。

• 配套设置（选内容居中后出现）：

  • 整条背景（铺满全宽）：设置那层统一底色（色值）；

  • 内容宽度：内容与左右箭头的居中最大宽度，默认 980（PC）/ 375（移动），可填数字调整。超出该宽度的内容在预览/上线时会被裁剪（编辑器里以居中虚线框标出安全范围）。

提示：两种布局下每张幻灯片仍可有自己的背景；内容居中模式下，每屏背景叠加在统一底色之上、只作用于中心内容区（透明时透出统一底色）。布局的实际效果请在 「预览」 中查看。

轮播设置详解

在配置面板的「轮播设置」中，可以调整轮播的动画与交互表现。

注意：动画与轮播效果需要在 「预览」 中查看实际表现，编辑器画布中不会实时播放。

• 过渡效果：切换幻灯片时的动画方式，可选 滑动 / 垂直滑动 / 淡入淡出 / 缩放淡入；

• 指示器：底部分页指示器样式，可选 无 / 圆点 / 分数 / 进度条；选择圆点时还可设置圆点大小、指示器颜色和选中点颜色；

• 左右箭头：显示左右切换箭头，可设置箭头大小与颜色；

• 自动播放 与 动画速度：开启后幻灯片自动切换，动画速度控制单次切换动画的时长（单位毫秒）；

• 循环播放：播放到最后一张后回到第一张，循环轮播；

• 展示时长：默认所有幻灯片使用统一的全局延迟；如需让某一张停留更久或更短，可在该幻灯片设置中开启 「自定义时长」 单独设置。

管理幻灯片

开启轮播后，配置面板中会出现 「幻灯片」 列表，你可以在此切换、添加、删除幻灯片，以及拖拽调整播放顺序。

添加幻灯片

点击「添加幻灯片」，有三种创建方式：

• 复制当前幻灯片：保留当前幻灯片的背景、内容和点击动作，适合制作风格一致的多张幻灯片；

• 从空白开始：仅保留默认布局，从空内容开始设计；

• 从模板选择：选用倒计时 / 优惠券 / 促销等预设布局快速创建。

独立编辑每张幻灯片

每张幻灯片都可以单独编辑。切换幻灯片标签，即可在画布上分别编辑各屏的内容元素（文字、图片、按钮等）。

在幻灯片列表中展开某一张，还可以配置这张幻灯片独有的设置项：

• 背景：可选颜色（支持渐变）或图片；选择图片时还可上传/更换图片并调整不透明度。此背景仅作用于当前这张幻灯片，各屏互不影响；

• 点击动作：为整张幻灯片设置点击动作，如跳转链接或事件计测；

• 展示时长：勾选 「自定义时长」 后，可单独设置这张幻灯片的停留时间（单位毫秒）；不勾选则沿用轮播的全局延迟。

调整播放顺序

在幻灯片列表中，通过拖拽即可调整各张幻灯片的先后顺序，轮播将按照列表中的顺序依次播放。

关于高度

轮播条中所有幻灯片等高，整体高度会跟随内容最高的那一张自动统一，从而保证切换时不会出现高度跳动。你也可以在 「位置&大小」→「浮条布局」→「高度」 中手动调整整条轮播条的高度。

注意事项

• 轮播的动画效果请通过 「预览」 确认，编辑器画布中不实时播放；

• 一条轮播悬浮条最多支持 10 张幻灯片。