1.輪播的實現原理是怎樣的？如果讓你來實現，你會抽象出哪些函數(or接口)供使用?
1.固定包裹圖片的父容器的寬度,overflow :hidden屬性規定當內容溢出元素框時隱藏
2.多張圖片浮動,排成一排,設置,通過改變left值,實現偏移
3.方法
pre():上一頁就是一排圖片向右移動,left增加
next():下一頁就是一排圖片向左移動,left減小
4.定義全局屬性$curIndex,記錄當前顯示圖片的index.
判斷第一張和最后一張的偏移
5.下圖和代碼結合看:理解最后一張和第一張怎么銜接流暢
銜接不卡頓原理圖
//以下一頁為例,下一頁就是一排圖片向左移動,left減小
//當點擊最后一頁,幾乎同時完成兩個動作,一是偏移一個圖片寬度,二是把包裹圖片容器的left設置為下一張克隆圖片原來的left的值,這樣就是一個循環,而且看不出圖片突然移動.
function next(idx){
$imgCt.animate({
left: "-="+idx*$imgWidth//點擊下一頁,偏移一個圖片寬度
},function(){
$curIndex += idx;
if($curIndex >= $imgLen){
$imgCt.css({left: -$imgWidth});
$curIndex = 0;
}
$imgLock = true;
setBullet()
})
}
function pre(idx){
$imgCt.animate({
left:'+='+$imgWidth//圖片右移,left增加
},function(){
$curIndex = curIndex - idx;//0 - 1
if($curIndex <0){//在第一張時點擊上一張
$imgCt.css({left:-$imgLen*$imgWidth});//迅速左移圖片
}
})
}
2.實現左右滾動無限循環輪播效果
偏移原理:利用包裹圖片的容器left值即:$imgCt.css('left'),偏移距離總是圖片寬度的整數倍的數字作為索引.
3. 實現一個漸變輪播效果
原理: setInterval();clearInterval();fadeIn;fadeOut;
