輪播的實現(xiàn)原理是怎樣的?如果讓你來實現(xiàn)土辩,你會抽象出哪些函數(shù)(or接口)供使用靴跛?(比如 play()
原理:
克隆第一張圖片插入到最后一張圖的后面幢泼,克隆最后一張圖插入到第一張圖的,這樣洁仗,當(dāng)滾動到最后一張的時候层皱,顯示的是克隆的第一張圖片,在沒滾完之際快速的切到真實的第一張圖片赠潦,當(dāng)在第一張往后滾動的時候奶甘,同理,顯示的是克隆的最后一張祭椰,然后快速的切換到真實的最后一張臭家,這樣用戶感覺不到,就跟無縫滾動的一樣方淤。在顯示上钉赁,對最外層的容器使用,相對定位携茂,并使它的寬度和輪播圖的寬度一樣你踩,超出部分隱藏,對于要輪播的圖片讳苦,使用浮動带膜,使它們水平排列,包裹圖片的父容器用絕對定位鸳谜,然后操作圖片便宜的距離膝藕,就可以達(dá)到滾動的效果。
抽出的函數(shù):
1.點擊時圖片往前滾動
playNext(){}
2.點擊時圖片往后滾動
playPre(){}
3.設(shè)置輪播圖下方的點
setDot(){}
4.輪播圖無限循環(huán)
autoPlay(){}
5.輪播
slider(){}
實現(xiàn)視頻中的左右滾動無限循環(huán)輪播效果
效果預(yù)覽
代碼
因為沒有阻止a的默認(rèn)事件咐扭,狠狠的坑了自己一個下午芭挽!