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