輪播的原理

滑動輪播
1.輪播的圖片水平排列
2.給出一個與圖片相同大小的視窗包裹圖片列，設置overflow: hidden，這樣視窗就只能看到一張圖片
3.通過position：absolute或者transform來移動整個圖片列，實現輪播的基本邏輯；
4.將第一張和最后一張圖片克隆分別放到末尾和首部，目的是為了當輪播滾動到最后一張圖時，那么它的下一張就會到克隆第一張圖，這個時候馬上把整個圖片列回歸到真實的第一張，達到無限循環輪播
5.可以抽離出一些函數分別實現一些按鈕功能，如：

function 播放下一張() {
  //...
}

function 播放上一張() {
  //...
}

再綁定按鈕事件，輪播更具交互性

漸變輪播
1.與滑動輪播的布局基本類似，不過這里圖片要重疊在一起，可以對單張圖片進行position：absolute實現，且display：none
2.漸變輪播的核心是確定漸變離開的圖片和漸變進入的圖片。
當圖片漸變離開時，下一張圖片應該漸變進入。
漸變效果可以使用jQuery的fadeIn()和fadeOut()實現
3.與滑動輪播類似，可以抽離出一些函數，實現播放上一張和下一張的功能按鈕，讓輪播更具交互性

!!下面是兩個demo，圖片較大，防止bug，圖片加載完成前不會進行輪播，耐心等待!!
滑動輪播
https://leeeozhang.github.io/Demos/carousel-slide/
漸變輪播
https://leeeozhang.github.io/Demos/carousel-fade/