輪播的實現(xiàn)原理是怎樣的蜂厅?如果讓你來實現(xiàn),你會抽象出哪些函數(shù)(or接口)供使用括堤?(比如 play())
- 輪播的實現(xiàn)原理:
- 先將需要展示的圖片及它們的父容器設(shè)置為相同的尺寸(等寬等高)硝枉,并且將超出父容器以外的部分隱藏导盅,這樣就可以保證同時只顯示其中一張圖片溉潭;
- 對于左右滾動效果的輪播净响,需要將圖片無間距地排成一橫排(這里可以使用絕對定位、浮動等方法來實現(xiàn))喳瓣。
當(dāng)我們點擊切換按鈕的時候别惦,改變圖片整體的left值,實現(xiàn)視覺上向左或向右的滾動夫椭; - 對于漸變效果的輪播,需要讓圖片層層覆蓋氯庆,并且先展示其中一張蹭秋,其它的進(jìn)行隱藏。
當(dāng)我們點擊切換按鈕的時候堤撵,讓正在被展示的圖片消失仁讨,同時根據(jù)index值,找到對應(yīng)序號的圖片并展示即可实昨。
- 實現(xiàn)輪播的過程中通常會用到以下幾個函數(shù):
playNext():綁定html中向右的按鈕洞豁,展示下一張圖片;
playLast():綁定html中向左的按鈕荒给,展示上一張圖片丈挟;
setBullet():綁定html中用于切換輪播圖的若干個導(dǎo)航按鈕,直接切換到被點擊按鈕所對應(yīng)的圖片志电;
autoPlay():自動進(jìn)行輪播曙咽;
stopAuto():停止自動輪播。