輪播圖

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)

2.實(shí)現(xiàn)視頻中的左右滾動(dòng)無(wú)限循環(huán)輪播效果

代碼
展示

3.實(shí)現(xiàn)一個(gè)漸變輪播效果, 效果范例

代碼
展示

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 通過(guò)學(xué)習(xí),我理解了圖片輪播原理,學(xué)習(xí)了setTimeout()、setInterval()函數(shù)設(shè)置定時(shí)器與清除定時(shí)...
    McRay閱讀 2,291評(píng)論 0 7
  • 本文首發(fā)于我的博客,這是我的github,歡迎star。 這是一個(gè)輪播圖組件,你可以直接下載使用,這里是代碼地址,...
    空_城__閱讀 1,613評(píng)論 2 5
  • 1.背景介紹 輪播圖,是由網(wǎng)頁(yè)banner進(jìn)化而來(lái),通常放在屏幕最顯眼的位置,以大圖顯示。隨著網(wǎng)頁(yè)中需要推廣的信息...
    阿布_0caf閱讀 2,070評(píng)論 0 6
  • 主要思路 1.我們需要自定義一個(gè)繼承自FrameLayout的布局,利用FrameLayout布-局的特性(在同一...
    ZebraWei閱讀 2,781評(píng)論 0 5
  • 不知從何時(shí)起,“顏值”成了一個(gè)爛大街的詞兒。動(dòng)不動(dòng)就說(shuō)某某是顏值擔(dān)當(dāng),多帥、多美。而在我的記憶里,第一個(gè)親眼...
    高枕有憂閱讀 534評(píng)論 0 0

友情鏈接更多精彩內(nèi)容