设计一个无限轮播组件

Posted by jiananshi on 2019-05-29

轮播组件是前端很常见的组件,抛开市面上的 lib 自己写一个无限轮播还是有很多种设计思路的,这里记录一个实现和性能相对较好的一个方案。

首先无限轮播相比其他轮播组件最大的不同是要求播放到最后一个图片时沿原播放方向自动顺延至第一张,如果可交互的话用户在第一张轮播图向左拖动也要移动到最后一张,这样的组件应该如何设计呢?

接下来要介绍的方案如下图所示,主要有以下几个出发点:

  1. 图片顺序排列,通过移动 viewport 达成轮播的效果
  2. 前后各冗余一张图片

img

在轮播组件正常轮播的时候,viewport 设置成固定的宽度以免轮播图片都放进去样式乱掉,当轮播组件播放时,通过 translateX 移动 viewport 配合 css transition 达到体验良好的播放效果:

1
2
3
4
5
6
7
8
.viewport {
overflow: hidden;
width: 100%;
}

.viewport.aniamted {
transition: transform .2s ease;
}

这里将 animated 拆出来写,因为当轮播到最后一张图片(Scene 1 duplicate),在动画完成的瞬间(代码里是 200ms),我们通过对 viewport 一个无动画效果的移动将 viewport 瞬间移动到(Scene 1),由于关闭了动画视觉上几乎没有感受到此时已经完成了从(Scene 1 duplicate 到 Scene 1 的切换)