輪播的實現(xiàn)原理瞻惋？
以四個圖片的輪播為例
html部分：圖片存放在ul li標簽內，并使用一個div包裹ul
css部分： div設置relative援岩，寬度為單個圖片的寬度歼狼，并設置overflow: hidden；ul設置absolute定位享怀，寬度在js中設置（因為還需要clone首尾的圖片羽峰，所以不在CSS中設置寬度）,li全部左浮動
js部分
- 獲取ul節(jié)點、獲取實際圖片的數(shù)量imgNum添瓷、獲取單個圖片的寬度imgWidth梅屉，定義一個索引curIndex記錄當前顯示的圖片索引
- clone第一張圖片并添加在圖片列表的最后，clone最后一張圖片并添加到圖片列表的最前面鳞贷，注意：此時顯示的是最后一張圖片的內容坯汤，需將ul向左移動一個圖片寬度的距離
- 獲取圖片列表的寬度(并將其設置為ul的寬度(4+2張圖片))，
- 定義以下接口：playNext(len)搀愧、playPre(len)
- playNext(): 執(zhí)行該函數(shù)時使用動畫將ul向左偏移一個圖片(假設len=1)的寬度惰聂，動畫結束后，將curIndex加1咱筛，同時判斷curIndex是否為最后一個圖片(此時顯示的其實是第一個圖片)搓幌，如果是的，則將ul定位到真正的第一個圖片的位置(使用css方法的left進行設置)
- playPre(): 該函數(shù)與playNext移動的方向相反迅箩，執(zhí)行該函數(shù)時溉愁，使用動畫將ul向右偏移一個圖片的寬度，動畫結束后饲趋，將curIndex減1拐揭，同時判斷curIndex是否為第一個圖片(此時顯示的其實是最后一個圖片)罢缸，如果是的，則將ul定位到真正的最后一個圖片的位置
輪播的實現(xiàn)需要注意幾點：
- 圖片需要排列成一排投队，并通過overflow:hidden只顯示出一個圖片
- 需要clone首尾圖片枫疆，并添加到圖片列表中，便于過渡敷鸦，具體可以查看代碼
- 輪播就是將圖片列表的容器使用動畫進行左右移動
實現(xiàn)視頻中的左右滾動無限循環(huán)輪播效果
實現(xiàn)一個漸變輪播效果
原理：
- html與滾動輪播一樣息楔，注意css中圖片容器寬度設置為圖片的寬度，圖片全部設置為absolute扒披，同時只將第一個圖片顯示出來值依，其余的都設置為display:none
- js部分：使用jquery的fadeOut()函數(shù)隱藏當前圖片，使用fadeIn()函數(shù)顯示下一個將要顯示的圖片碟案，即可完成淡入淡出的效果
代碼演示
使用CSS 實現(xiàn)
在上面的實現(xiàn)代碼中愿险，使用的是絕對定位，調整left的值來進行輪播价说；另一種方法是使用css3的transform: translateX()來移動圖片辆亏，通過transition: transform來添加動畫效果
