輪播

輪播的實現原理

  1. 輪播是把圖片浮動水平排列。
  2. 然后設置一個視窗，大小等于一張圖片。
  3. 視窗的overflow設置為hidden，溢出部分不可見。
  4. 點擊下一頁，所有圖片就水平移動一個寬度。

就像一張膠卷，每次展示一張圖片，通過移動膠卷來切換可視的圖片。

抽象出的函數組件

  • playNext() 下一頁
  • playPre() 上一頁
  • setBullet() 設置底部的小方塊

輪播范例

  • 滑動輪播效果
    代碼
    點擊左右的箭頭能前后滑動，點擊底部的框框能直接滑動到對應的圖片
  • 漸變輪播效果
    代碼
    自動輪播，當鼠標移到圖片上時候，停止自動輪播，可以手動點擊左右箭頭切換圖片，也可以點擊底部的框框直接跳轉到對應的圖片
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容