← 返回 Web 词条

轮播

Web需自己实现

Web 原生没有这个

网页没有原生轮播组件,需要自行实现切换、暂停、焦点、当前项说明和触摸手势。

通常怎么做:优先使用可横向滚动列表;自动播放时必须提供暂停控制并避免抢焦点。

适用范围:桌面与移动端现代浏览器

社区一般叫它 Carousel · Slider

它在有限区域中逐项展示一组内容,用户可以横向切换到前后项目。

  • 一张张左右滑的图片
  • 首页会自己换图的那一块
  • 横着划可以看下一张的卡片
  • 轮播图
  • 横向轮播
  • 滑动卡片组

结构示意图

WebCarousel需自己实现

其他平台的相似实现

使用规范

什么时候用

  • 一组视觉内容地位相近,并且横向浏览比同时铺开更节省空间

什么时候别用

  • 关键内容不能隐藏、用户必须比较所有项目,或自动轮播会打断阅读

容易混淆

Web 出处

查看 Web / iOS / Android 完整对照 →