**題目1: 輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來(lái)實(shí)現(xiàn),你會(huì)抽象出哪些函數(shù)(or接口)供使用?(比如 play())
將圖片排成一行,隱藏超出范圍的圖片,并在第一張圖片前添加最后一張圖片,在最后一張圖片后添加第一張圖片,當(dāng)觸發(fā)點(diǎn)擊下一張圖片的事件時(shí),根據(jù)方向移動(dòng)圖片位置來(lái)滾動(dòng)顯示圖片,滾動(dòng)到最后一張圖片或第一張圖片時(shí),再次滾動(dòng)要跳轉(zhuǎn)到第一張的圖片或最后一張圖片的位置。
function playNext(len){
$imgCt.animate({
left: '-='+len*$firstImg.width()
},function(){
curpage+=len;
if (curpage===imgCtLength) {
$imgCt.css('left','-320px')
curpage=0;
}
setBullets();
})
}
function playPre(len){
$imgCt.animate({
left: '+='+len*$firstImg.width()
},function(){
curpage-=len;
if (curpage<0) {
$imgCt.css('left',-(imgCtLength*$firstImg.width()))
curpage=imgCtLength-1;
}
setBullets();
})
}
題目2: 實(shí)現(xiàn)視頻中的左右滾動(dòng)無(wú)限循環(huán)輪播效果
題目3:*實(shí)現(xiàn)一個(gè)漸變輪播效果, 效果范例61
demo
原理和上一題一樣,將左右移動(dòng)效果替換成fadeOut,fadeIn即可,然后將curIdx = idx這個(gè)參數(shù);再點(diǎn)擊,再fadeOut,In。但是做的仍有諸多不熟練,需再敲幾次代碼鞏固。