用原生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