輪播的實(shí)現(xiàn)

**題目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)輪播效果

demo

題目3:*實(shí)現(xiàn)一個(gè)漸變輪播效果, 效果范例61

demo
原理和上一題一樣,將左右移動(dòng)效果替換成fadeOut,fadeIn即可,然后將curIdx = idx這個(gè)參數(shù);再點(diǎn)擊,再fadeOut,In。但是做的仍有諸多不熟練,需再敲幾次代碼鞏固。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 題目1: 輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來(lái)實(shí)現(xiàn),你會(huì)抽象出哪些函數(shù)(or接口)供使用?(比如 play()) 左...
    yuhuan121閱讀 326評(píng)論 0 0
  • 題目1:輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來(lái)實(shí)現(xiàn),你會(huì)抽象出哪些函數(shù)(or接口)供使用?(比如 play()) 滾動(dòng)...
    撫年華輕過(guò)閱讀 485評(píng)論 0 0
  • 輪播的實(shí)現(xiàn)原理? 以四個(gè)圖片的輪播為例html部分:圖片存放在ul li標(biāo)簽內(nèi),并使用一個(gè)div包裹ulcss部分...
    放風(fēng)箏的小小馬閱讀 670評(píng)論 0 0
  • 題目1: 輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來(lái)實(shí)現(xiàn),你會(huì)抽象出哪些函數(shù)(or接口)供使用?(比如 play()) 原...
    魔王卡卡閱讀 228評(píng)論 0 0
  • 題目1: 輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來(lái)實(shí)現(xiàn),你會(huì)抽象出哪些函數(shù)(or接口)供使用?(比如 play()) 左...
    cctosuper閱讀 332評(píng)論 0 0

友情鏈接更多精彩內(nèi)容