1. 輪播的實(shí)現(xiàn)原理是怎樣的孩擂?如果讓你來(lái)實(shí)現(xiàn),你會(huì)抽象出哪些函數(shù)(or接口)供使用活孩?(比如 play())
實(shí)現(xiàn)原理:
1.把圖片a(即圖片1的克隆)與圖片b(即圖片4的克隆)分別接到第一張圖片(圖片1)的上一張圖片的位置悠汽,最后一張圖片(圖片4)的下一張圖片的位置,作為過渡圖片徽职,如下圖所示:
image.png
2.點(diǎn)擊左箭頭,圖片1向圖片b切換時(shí)剧蹂,顯示切換動(dòng)畫爆安,當(dāng)切換到圖片b后(即圖片b位于輪播窗口中時(shí)),立即調(diào)整圖片盒子的left位置怀偷,使圖片4顯示在輪播窗口中家厌,這樣就能達(dá)到輪播無(wú)縫切換圖片的效果。
image.png
抽象函數(shù)
//切換到哪個(gè)圖片的方法
goTo(index)
//下方切換圖片按鈕樣式的設(shè)置方法
setBulletDisplay(index)
//自動(dòng)播放圖片的方法
autoPlay()
2. 實(shí)現(xiàn)視頻中的左右滾動(dòng)無(wú)限循環(huán)輪播效果
http://js.jirengu.com/hayo/3/edit
image.png
3.實(shí)現(xiàn)一個(gè)漸變輪播效果, 效果范例
http://js.jirengu.com/difax/3/edit
image.png