web前端-js小記(17)-輪播的實現

題目1:輪播的實現原理是怎樣的?如果讓你來實現,你會抽象出哪些函數(or接口)供使用?(比如 play())

  1. 滾動輪播的實現原理:
    設置所有的圖片無縫隙的放在同一行,并對每張圖片設置position:absolute;先再瀏覽器改變left數值,確定是否可以進行滾動,再編寫JS,在第一張圖片前clone最后一張圖片,在最后一張圖片后clone第一張圖片,每次移到clone的圖片的時候進行css({left})設置,讓圖片回到真正想要到的圖片上。設置一個變量len,記錄需要顯示的下一張圖片距離當前顯示圖片的距離個數,然后animate()方法進行滑動。
  2. 漸變輪播:
    對所有的圖片設置隱藏并設置position:absolute;然后再瀏覽器修改每個圖片的display,判斷是否可以滾動,通過fadeIn()和fadeOut()漸變圖片。
  3. 接口:
    前進函數,后退函數
    選擇函數
    自動輪播函數

題目2:實現視頻中的左右滾動無限循環輪播效果

代碼

題目3:實現一個漸變輪播效果, 效果范例339

代碼

(mission 17)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,242評論 25 708
  • 輪播的實現原理? 以四個圖片的輪播為例html部分:圖片存放在ul li標簽內,并使用一個div包裹ulcss部分...
    放風箏的小小馬閱讀 636評論 0 0
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,229評論 4 61
  • 半夜里,被剛滿周歲的女兒哀鳴聲驚醒,看著她翻來覆去難受的樣子,千萬種焦慮涌上心頭。白天就已噴嚏連連鼻涕不斷,為了不...
    路茵閱讀 315評論 0 0
  • 連載《想象每一本書都是一顆種子》簡介:每天在最美書店工作,總會留意下讀者喜歡什么樣的書,什么樣的書讀者會追捧,什么...
    大為君David閱讀 2,578評論 8 22