圖片輪播的思路
阿新 • • 發佈:2017-10-28
swiper 簡單的 硬件 推薦 設置 完全 header 加速 one
-
方案一
首先, 輪播圖在html頁面來說最重要的就是切換過程 。目前比較簡單的實現方法如圖,
輪播至邊界的時候再重置輪播
-
方案二
第一張圖和最後一張圖一樣。
這樣當用戶拖動到最後一張但是又沒完全拖完整的時候,就會顯示第一張的效果。
-
- 方案一在輪播至邊界時,需要從這一端快速滑動至另外一端,體驗不佳;
- 方案二對邊界輪播做了優化,但還是略顯不足;
-
淘寶方案
接下來看看相關的示意圖!
- 容器用了虛線框,因為此方案的ul是不需要設置寬高的
- 容器ul和元素li都使用了translate3d以及相關屬性,從而更好的利用硬件加速
- 邊界處理:只移動一個元素,便可實現循環,性價比更高
-
其他方案
使用絕對定位,,圖片重疊,默認第一張圖片顯示,比如輪播圖width=100px,給圖片排個序,記錄當前的圖片序號
點第幾個點,第eq(num)張圖片顯示,其他隱藏
所有隱藏的圖片left=100px,顯示的那張圖片left=0,
下一張時,就把找到下一個圖片,把圖片的left改成0
-
寫在最後
什麽都不用想,具體的實現細節也不用考慮了,推薦一款輪播的插件直接拿來使就好啦——swiper
圖片輪播的思路