Slider 图片轮播

    适用

    • 多张图片的打包展示

    • 官网广告位

    不适用

    • 非同类对象的打包展示

    • 对象间存在绝对优先级的时候

    • 对象数量 <= 2 个的时候,可直接展示出来(固定广告位除外)

    通用原则

    • 图片默认顺时针自动滚动

    • 用户鼠标 hover 则停止自动滚动,并且相应用户的操作

    类型

    类型 何时使用
    强调型 作为头图使用
    常规 在页面模块内使用

    强调型

    • 适用于页面头部,占据重要位置,需要突出显示。

    • 图片数 >=3

    常规

    多用于页面模块内,但也可根据实际需要选择放置位置。

    构成

    1. 指示器

    2. 图片

    3. 左右箭头(可选)

    行为

    当用户未触发热区时

    • 图片自动轮播

    • 顺时针方向

    • 间隔时间为 3s-5s (可根据产品需要做调整)

    当用户触发热区时

    • 停止自动轮播,并响应用户的点击行为

    • 点击中间的图片则前往链接页面

    • 鼠标 hover「指示器」快速定位特定图片

    • 点击「左、右」查看「前、后」的图片

    实践案例


    样式

    布局

    类型 位置 响应式规则
    大型 仅限页面顶部 固定最大尺寸,暂无响应式
    常规 页面顶部,局部均可 百分比宽度布局,(图片最大尺寸1280px,超过最大尺寸宽度固定不变