題目1： 輪播的實現原理是怎樣的？如果讓你來實現，你會抽象出哪些函數(or接口)供使用？（比如 play()）
-
實現原理,左右滾動輪播為例
關于布局:
1. 初步布局:首先父容器相對定位,設定好寬高(確定輪播框大小),設置overflow:hidden溢出隱藏,在父容器內部設置img容器絕對定位,方便確定位置(注意不要限制死容器寬高,因為如果后面加入新的圖片得修改值),設置overflow:hidden形成BFC,防止因浮動產生高度坍塌
2.img父容器內部為多個包含a鏈接(方便跳轉鏈接)和img的li元素,給img設置好寬高,li元素左浮,橫向排成一排,左右輪播鍵和底部的圓點都可通過絕對定位確定位置.關于實現邏輯:
1.通過移動img容器的位置來展現不同的圖片,達到切換效果.實現方法:在img容器中,clone最后一個元素至首部,clone第一個元素至尾部,通過計算
(imgCount+2) * imgWidth得到img容器的寬度,imgCount為初始li元素的個數.
先確定好第一張展示圖片的位置為$imgCt.css({left: -imgWidth}),當圖片左右切換,img容器位置左右加減.當運動到clone首圖片時,立即跳轉到原來的首圖片,設置css屬性$imgCt.css({left: -imgWidth}).當運動到clone尾圖片時,立即跳轉到原來的尾圖片$imgCt.css({left: -imgCount*imgWidth}),從而達到無限左右滾動效果,css屬性切換在人眼看來是連貫的.
2.另外需要在展示不同圖片的時候,知道這是第幾張,設置標記位,第一張標記位為0,后面累加.最后一張為imgCount-1,通過不同的標記位img容器移動對應的位置,實現跳轉圖片.
函數接口:
//自動循環播放
autoPlay()
//左右切換鍵
playNext() //切換至下一張
playPre() //切換至上一張
//底部導航按鈕切換效果
setBullet()
