輪播的原理
滑動輪播
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/