1.輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來(lái)實(shí)現(xiàn),你會(huì)抽象出哪些函數(shù)(or接口)供使用?(比如 play())
橫向輪播:
布局:讓父容器相對(duì)定位,設(shè)定寬高為一個(gè)圖片的寬高,并且overflow:hidden(超出部分不顯示);在父容器中設(shè)置一個(gè)圖片容器,高度為圖片高,寬度為圖片寬*圖片個(gè)數(shù);在底部設(shè)置小圓點(diǎn),絕對(duì)定位居于父容器底部;
邏輯:一開始將尾圖片和首圖片clone后,分別放在首尾;增加圖片容器的寬度;封裝向前/向后翻頁(yè)的方法(包含動(dòng)畫,動(dòng)畫鎖,變化小圓點(diǎn)狀態(tài));最后為按鈕添加事件(邏輯處理代碼)
全局變量:curPage(當(dāng)前第幾張圖片)和isAnimate(動(dòng)畫加鎖)
封裝函數(shù):play(n):封裝向后n頁(yè)(n可以是負(fù)數(shù)),playNext:向后,playPre:向前。淡入淡出、自動(dòng)輪播圖
布局:類似與橫向輪播。但是圖片是絕對(duì)布局,可以互相覆蓋。一開始只有第一張圖片是顯示,其他隱藏。
邏輯:與橫向輪播類似,不需要clone首尾圖片、重設(shè)寬度,但要設(shè)置定時(shí)器循環(huán)翻頁(yè)
全局變量和封裝函數(shù):與橫向輪播類似,方法play(n)