圖片輪播組件實現

爲何要本身實現

圖片輪播，這其實已是一個爛大街的功能，處處可見；網上也有不少現成的組件，那爲何還要本身來實現呢？主要的緣由有兩個

• 性能
• 定製化

一個是網上的組件參差不齊，在pc跑跑還能夠，到了移動端，各類卡。 另一個緣由，是由於有諸多定製化的交互要實現，因此仍是自力更生，豐衣足食！

舉兩個栗子

在本身擼代碼以前，先來看看別人家的組件，正所謂：不看白不看。下面列舉兩種網上比較通用的輪播方案

• 方案一

• 方案二

方案一在輪播至邊界時，須要從這一端快速滑動至另一端，體驗不佳； 方案二對邊界輪播作了優化，但仍是略顯不足；

原創方案

接下來看看相關的示意圖！

• 容器用了虛線框，由於此方案的ul是不須要設置寬高的
• 容器ul和元素li都使用了translate3d以及相關屬性,從而更好的利用硬件加速
• 邊界處理：只移動一個元素，即可實現循環，性價比更高

原創demo

只處理了移動端事件（touch系列），因此要體驗完整功能，請使用移動端瀏覽器或者用pc瀏覽器模擬移動版打開如下實例。

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

github項目

更多細節和源碼，請：點擊訪問