題目1: 輪播的實現(xiàn)原理是怎樣的?如果讓你來實現(xiàn)档悠,你會抽象出哪些函數(shù)(or接口)供使用戏自?(比如 play())
滾動輪播
一系列的大小相等的圖片平鋪,利用CSS布局只顯示一張圖片邓嘹,其余隱藏酣栈。通過計算偏移量利用定時器實現(xiàn)自動播放,或通過手動點擊事件切換圖片汹押。無縫輪播:復制第一張和第三張矿筝,分別放到對尾和對前,移動到這兩個位置時棚贾,再切換到復制圖片對應的原圖片上窖维,這樣就可以無縫移動圖片。
漸變輪播
利用定位使圖片上下疊在一起
初始化只顯示第一張圖片
利用fadeout與fadein方法來實現(xiàn)不同的圖片漸變消失與漸變出現(xiàn)
設計抽象playnext()切換下一張妙痹,playpre()切換上一張铸史, autoplay()自動循環(huán)
題目2: 實現(xiàn)視頻中的左右滾動無限循環(huán)輪播效果
http://js.jirengu.com/xoguvihoye/1/edit
題目3: 實現(xiàn)一個漸變輪播效果
http://js.jirengu.com/kovazafuli/1/edit