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