題目1:輪播的實現原理是怎樣的?如果讓你來實現,你會抽象出哪些函數(or接口)供使用?(比如 play())
-
滾動輪播的實現原理:
設置所有的圖片無縫隙的放在同一行,并對每張圖片設置position:absolute;先再瀏覽器改變left數值,確定是否可以進行滾動,再編寫JS,在第一張圖片前clone最后一張圖片,在最后一張圖片后clone第一張圖片,每次移到clone的圖片的時候進行css({left})設置,讓圖片回到真正想要到的圖片上。設置一個變量len,記錄需要顯示的下一張圖片距離當前顯示圖片的距離個數,然后animate()方法進行滑動。 -
漸變輪播:
對所有的圖片設置隱藏并設置position:absolute;然后再瀏覽器修改每個圖片的display,判斷是否可以滾動,通過fadeIn()和fadeOut()漸變圖片。 -
接口:
前進函數,后退函數
選擇函數
自動輪播函數
題目2:實現視頻中的左右滾動無限循環輪播效果
題目3:實現一個漸變輪播效果, 效果范例339
(mission 17)