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

左右滾動(dòng)無限循環(huán)輪播的實(shí)現(xiàn)

原理是將所有圖片的水平排列，但是視口只有一張圖片的寬度，超出范圍的圖片隱藏，切換圖片的時(shí)候?qū)嶋H上是包含全部水平圖片的大盒子在移動(dòng)。

操作方式有

1. 直接操作DOM，實(shí)現(xiàn)順序切換
   當(dāng)圖片展示到最后一張時(shí)，直接將第一張移到最后一張圖后面，或者就是當(dāng)?shù)谝粡垐D往前點(diǎn)的時(shí)候，把最后一張移到第一張圖前面，以這樣的方式循環(huán)播放

2. 通過克隆
   在圖片列表開頭和結(jié)尾分別添加最后一張圖和第一張圖。圖片的切換，就是改變絕對(duì)定位元素的left值。
   當(dāng)我們展示到最后一張圖往后點(diǎn)或者第一張圖往前點(diǎn)的時(shí)候，會(huì)先展示我們之前克隆好的圖，同時(shí)把元素回歸到正確的位置。即真正的第一張或者最后一張的位置，通過pageIndex = 0 和$imgCt.css({left: -imgWidth})

Paste_Image.png

左右漸變輪播

漸變輪播的元素不采用水平排列
利用fadeOut,fadeIn控制當(dāng)前的元素隱藏，下一個(gè)元素顯示
重點(diǎn)是對(duì)應(yīng)的索引值的變化

可以用來抽象的接口函數(shù)

1. nextPlay()
2. prePlay()
3. play()
4. setBullet()

題目2： 實(shí)現(xiàn)視頻中的左右滾動(dòng)無限循環(huán)輪播效果

左右滾動(dòng)輪播

題目3： 實(shí)現(xiàn)一個(gè)漸變輪播

漸變輪播