輪播的實現原理
- 輪播是把圖片浮動水平排列。
- 然后設置一個視窗,大小等于一張圖片。
- 視窗的
overflow
設置為hidden
,溢出部分不可見。 - 點擊下一頁,所有圖片就水平移動一個寬度。
就像一張膠卷,每次展示一張圖片,通過移動膠卷來切換可視的圖片。
抽象出的函數組件
playNext()
下一頁
-
playPre()
上一頁 -
setBullet()
設置底部的小方塊
overflow
設置為hidden
,溢出部分不可見。就像一張膠卷,每次展示一張圖片,通過移動膠卷來切換可視的圖片。
playNext()
下一頁
playPre()
上一頁setBullet()
設置底部的小方塊