輪播

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

輪播的實現(xiàn)原理有兩種：

  1. 將輪播的圖片放置在一條直線上，只留出一個圖片的寬度，其它圖片均不可見。復(fù)制第一和最后一張圖片放置在直線的最后和最前，當(dāng)滾動上述兩個圖片時，回到該復(fù)制體原圖片的位置。發(fā)生滾動時根據(jù)需要向左或向右偏移N*圖片寬度的位置。
  2. 將輪播的圖片放置在同一垂直平面上，記錄當(dāng)前圖片編號和要滾動到的圖片編號，輪播時顯示要滾動到的圖片，隱藏掉之前的圖片

抽象出來的函數(shù):

  1. playNext() 向后滾動
  2. playPre() 向前滾動
  3. setButtons() 直接點擊跳轉(zhuǎn)

2. 實現(xiàn)視頻中的左右滾動無限循環(huán)輪播效果

http://js.jirengu.com/bowatuxoqe/1/edit

3. 實現(xiàn)一個漸變輪播效果

http://js.jirengu.com/kibuyayeka/2/edit

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 題目1： 輪播的實現(xiàn)原理是怎樣的？如果讓你來實現(xiàn)，你會抽象出哪些函數(shù)(or接口)供使用？（比如 play()） 1...
    北城_荒閱讀 203評論 0贊 0
  • 題目1： 輪播的實現(xiàn)原理是怎樣的？如果讓你來實現(xiàn)，你會抽象出哪些函數(shù)(or接口)供使用？（比如 play()） 輪...
    Gia_Mo閱讀 177評論 0贊 0
  • 主要思路 1.我們需要自定義一個繼承自FrameLayout的布局，利用FrameLayout布-局的特性（在同一...
    ZebraWei閱讀 2,342評論 0贊 5
  • 題目1： 輪播的實現(xiàn)原理是怎樣的？如果讓你來實現(xiàn)，你會抽象出哪些函數(shù)(or接口)供使用？（比如 play()） 例...
    _達(dá)斯基閱讀 356評論 0贊 0
  • 不得不說，給阿米爾·汗的專業(yè)和敬業(yè)10086+個贊！ 觀影有感：在阿米爾·汗飾演的父親指導(dǎo)下，兩個女孩刻苦付...
    L木牧閱讀 376評論 0贊 2