輪播的實(shí)現(xiàn)原理是怎樣的？如果讓你來實(shí)現(xiàn)，你會抽象出哪些函數(shù)(or接口)供使用？（比如 play()）

• 實(shí)現(xiàn)原理，以水平輪播圖為例：
  • 布局：父容器相對定位，設(shè)定寬高為一個(gè)圖片的寬高，設(shè)置overflow:hidden;溢出隱藏，父容器中設(shè)置一個(gè)圖片容器，高度為圖片高，寬度為圖片寬*圖片個(gè)數(shù)，所有圖片水平排成一列，父容器底部設(shè)置絕對定位小圓點(diǎn)
  • 邏輯：通過移動內(nèi)容塊的位置，使內(nèi)容塊內(nèi)部的元素達(dá)到切換效果，具體實(shí)現(xiàn)為：在尾部clone第一個(gè)元素，在頭部clone最后一個(gè)元素并相應(yīng)增加圖片容器的寬度；當(dāng)運(yùn)動到clone首圖片時(shí)，立即移動到真實(shí)首圖片，當(dāng)運(yùn)動到clone尾圖片時(shí)，就立即將其移動到真實(shí)尾圖片，這樣我們的肉眼看上去就是連貫循環(huán)的。當(dāng)快速切換到不同頁面時(shí)就需要知道當(dāng)前正在展現(xiàn)的是哪一頁，可以設(shè)置一個(gè)標(biāo)記位，初始值為0，每次切換時(shí)這個(gè)標(biāo)記位的值都要跟著改變。
  • 函數(shù)接口：

autoPlay()//自動循環(huán)播放
playNext()//切換到下一幀
playPre()//切換到上一幀
setBullet()//設(shè)置導(dǎo)航按鈕切換效果

實(shí)現(xiàn)視頻中的左右滾動無限循環(huán)輪播效果

我的實(shí)現(xiàn)

實(shí)現(xiàn)一個(gè)漸變輪播效果, 效果范例416

我的實(shí)現(xiàn)