輪播的實現原理？
以四個圖片的輪播為例
html部分：圖片存放在ul li標簽內，并使用一個div包裹ul
css部分： div設置relative，寬度為單個圖片的寬度，并設置overflow: hidden；ul設置absolute定位，寬度在js中設置（因為還需要clone首尾的圖片，所以不在CSS中設置寬度）,li全部左浮動
js部分
- 獲取ul節點、獲取實際圖片的數量imgNum、獲取單個圖片的寬度imgWidth，定義一個索引curIndex記錄當前顯示的圖片索引
- clone第一張圖片并添加在圖片列表的最后，clone最后一張圖片并添加到圖片列表的最前面，注意：此時顯示的是最后一張圖片的內容，需將ul向左移動一個圖片寬度的距離
- 獲取圖片列表的寬度(并將其設置為ul的寬度(4+2張圖片))，
- 定義以下接口：playNext(len)、playPre(len)
- playNext(): 執行該函數時使用動畫將ul向左偏移一個圖片(假設len=1)的寬度，動畫結束后，將curIndex加1，同時判斷curIndex是否為最后一個圖片(此時顯示的其實是第一個圖片)，如果是的，則將ul定位到真正的第一個圖片的位置(使用css方法的left進行設置)
- playPre(): 該函數與playNext移動的方向相反，執行該函數時，使用動畫將ul向右偏移一個圖片的寬度，動畫結束后，將curIndex減1，同時判斷curIndex是否為第一個圖片(此時顯示的其實是最后一個圖片)，如果是的，則將ul定位到真正的最后一個圖片的位置
輪播的實現需要注意幾點：
- 圖片需要排列成一排，并通過overflow:hidden只顯示出一個圖片
- 需要clone首尾圖片，并添加到圖片列表中，便于過渡，具體可以查看代碼
- 輪播就是將圖片列表的容器使用動畫進行左右移動
實現視頻中的左右滾動無限循環輪播效果
實現一個漸變輪播效果
原理：
- html與滾動輪播一樣，注意css中圖片容器寬度設置為圖片的寬度，圖片全部設置為absolute，同時只將第一個圖片顯示出來，其余的都設置為display:none
- js部分：使用jquery的fadeOut()函數隱藏當前圖片，使用fadeIn()函數顯示下一個將要顯示的圖片，即可完成淡入淡出的效果
代碼演示
使用CSS 實現
在上面的實現代碼中，使用的是絕對定位，調整left的值來進行輪播；另一種方法是使用css3的transform: translateX()來移動圖片，通過transition: transform來添加動畫效果
