用原生TypeScript造轮子四-轮播

ui 参考 primeNG: http://primefaces.org/primeng…
ts 开发环境：https://github.com/lycHub/ts-…
目录

说明

轮播应该是初期最锻炼基础的组件，难度适中，所以也把它加到本系列
已实现的功能：

• 自动轮播
• 自定义事件
• 无缝滚动
• 控制速度

demo 和源码

思路

轮播最常见的思路, 就是最外层 dom 设置 overflow:hidden; 然后动态计算内层元素（slide-wrap）的 width, 改变其 left 值

这里重点说下 demo 无缝滚动的实现。
无缝滚动的方法也有多种，这里是复制了的首尾两个 slide 分别放在 slide-wrap 的尾和首，如图有 5 张 slide，其实有 7 个 dom 元素，一旦滚动到两个复本的位置，就立刻改变 left 值，假设这 7 个 dom 索引是 0~6，0 和 6 是副本，6 显示的是 slide1 的内容，所以滚动到 6 的位置后，直接改变 left 为 -800px，也就是上图的那个初始位置，代码如下：

这样就实现了无缝滚动的效果，这里为了省事，动画方面直接用了 transition，效果上有点小瑕疵，推荐找个动画函数库

然后就是有个小技巧，索引的边界值可以直接用(目标索引 + slide 数量) % slide 数量，或者用 Math.min 和 Math.max 来计算，尽量避免 if…else