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