图片轮播组件实现

为何要本身实现

图片轮播，这其实已是一个烂大街的功能，处处可见；网上也有不少现成的组件，那为何还要本身来实现呢？主要的缘由有两个

• 性能
• 定制化

一个是网上的组件参差不齐，在pc跑跑还能够，到了移动端，各类卡。 另一个缘由，是由于有诸多定制化的交互要实现，因此仍是自力更生，丰衣足食！

举两个栗子

在本身撸代码以前，先来看看别人家的组件，正所谓：不看白不看。下面列举两种网上比较通用的轮播方案

• 方案一

• 方案二

方案一在轮播至边界时，须要从这一端快速滑动至另一端，体验不佳； 方案二对边界轮播作了优化，但仍是略显不足；

原创方案

接下来看看相关的示意图！

• 容器用了虚线框，由于此方案的ul是不须要设置宽高的
• 容器ul和元素li都使用了translate3d以及相关属性,从而更好的利用硬件加速
• 边界处理：只移动一个元素，即可实现循环，性价比更高

原创demo

只处理了移动端事件（touch系列），因此要体验完整功能，请使用移动端浏览器或者用pc浏览器模拟移动版打开如下实例。

• base模式
• scale模式
• parallel模式

github项目

更多细节和源码，请：点击访问