題目1： 輪播的實現(xiàn)原理是怎樣的？如果讓你來實現(xiàn)愤炸，你會抽象出哪些函數(shù)(or接口)供使用期揪？（比如 play()）
- 左右輪播實現(xiàn)原理:
- 最外層可視窗口設(shè)置與圖片寬高相等, 并使用
overflow: hidden,內(nèi)部容器高度與圖片高度相等, 寬度為所有輪播圖片寬度之和, 并使用絕對定位, 以便通過left值控制左右滾動 - 如果要左右無限滾動, 需要克隆last img放在容器內(nèi)最前面, 克隆first img放在最后, 這樣當(dāng)輪播到第一張還想向前, 輪播到最后一張還想向后, 先展示克隆的img , 緊接著通過修改css left值立即替換為真正的首尾img, 由于沒有使用動畫, 且是相同的圖片, 所以肉眼看不出變化, 但實際已經(jīng)從臨時展示的克隆img變?yōu)樵璂OM中的img
- 最外層可視窗口設(shè)置與圖片寬高相等, 并使用
- 漸變輪播實現(xiàn)原理:
- 與左右輪播相仿, 但更簡單, 內(nèi)部img不需要左右水平排列, 只需要全部絕對定位, 疊加在一起, 然后全部
display: none; - js中需要在加載后, 就立即執(zhí)行一致輪播函數(shù), 淡入首張img,接下來監(jiān)聽事件, 通過淡出當(dāng)前圖片, 淡入預(yù)期圖片, 來達(dá)到漸變輪播
- 與左右輪播相仿, 但更簡單, 內(nèi)部img不需要左右水平排列, 只需要全部絕對定位, 疊加在一起, 然后全部
- 關(guān)于抽象函數(shù)or接口:
抽象出函數(shù)or接口, 代碼更有條理, 每個函數(shù)控制在20行內(nèi), 降低單個函數(shù)的復(fù)雜度, 提高代碼復(fù)用性; 由不同的函數(shù)部件, 協(xié)同完成; 降低了bug排查難度和耦合性; 同時也方便后續(xù)維護(hù), 修改, 或新增功能 - 關(guān)于輪播可以抽象出的接口如:
- playNext() 切換到下一張
- playPre() 切換到上一張
- setBullet() 設(shè)置狀態(tài)指示符號
- autoPlay() 自動輪播
- stopAuto() 停止自動輪播
