輪播的實現(xiàn)

輪播的實現(xiàn)原理是怎樣的?如果讓你來實現(xiàn),你會抽象出哪些函數(shù)(or接口)供使用?(比如 play())

  • 輪播的實現(xiàn)原理:
  1. 先將需要展示的圖片及它們的父容器設(shè)置為相同的尺寸(等寬等高),并且將超出父容器以外的部分隱藏,這樣就可以保證同時只顯示其中一張圖片;
  2. 對于左右滾動效果的輪播,需要將圖片無間距地排成一橫排(這里可以使用絕對定位、浮動等方法來實現(xiàn))。
    當(dāng)我們點擊切換按鈕的時候,改變圖片整體的left值,實現(xiàn)視覺上向左或向右的滾動;
  3. 對于漸變效果的輪播,需要讓圖片層層覆蓋,并且先展示其中一張,其它的進行隱藏。
    當(dāng)我們點擊切換按鈕的時候,讓正在被展示的圖片消失,同時根據(jù)index值,找到對應(yīng)序號的圖片并展示即可。
  • 實現(xiàn)輪播的過程中通常會用到以下幾個函數(shù):
    playNext():綁定html中向右的按鈕,展示下一張圖片;
    playLast():綁定html中向左的按鈕,展示上一張圖片;
    setBullet():綁定html中用于切換輪播圖的若干個導(dǎo)航按鈕,直接切換到被點擊按鈕所對應(yīng)的圖片;
    autoPlay():自動進行輪播;
    stopAuto():停止自動輪播。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • 1: 輪播的實現(xiàn)原理是怎樣的?如果讓你來實現(xiàn),你會抽象出哪些函數(shù)(or接口)供使用?(比如 play()) 一種左...
    曉風(fēng)殘月1994閱讀 513評論 0 0
  • 題目1: 輪播的實現(xiàn)原理是怎樣的?如果讓你來實現(xiàn),你會抽象出哪些函數(shù)(or接口)供使用?(比如 play()) 原...
    魔王卡卡閱讀 228評論 0 0
  • 題目1: 輪播的實現(xiàn)原理是怎樣的?如果讓你來實現(xiàn),你會抽象出哪些函數(shù)(or接口)供使用?(比如 play()) 左...
    cctosuper閱讀 330評論 0 0
  • 題目1: 輪播的實現(xiàn)原理是怎樣的?如果讓你來實現(xiàn),你會抽象出哪些函數(shù)(or接口)供使用?(比如 play()) 左...
    yuhuan121閱讀 326評論 0 0
  • 家翁壽晏席正開, 親朋故友酒杯滿, 美味佳肴齊上桌, 客笑主樂笑上傳。
    臉上永微笑閱讀 273評論 2 6

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