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