輪播

輪播的實現(xiàn)原理是怎樣的？可以抽象出哪些函數(shù)(or接口)供使用？（比如 play()）

輪播的原理是將輪播的圖片水平排列，在展示的視口內(nèi)顯示內(nèi)容，超出視口范圍的內(nèi)容隱藏。通過設(shè)置位置偏移在視口內(nèi)顯示出需要看到的內(nèi)容。

實現(xiàn)輪播效果思路

HTML，CSS部分：

圖片放置在ul標簽內(nèi)，外部包裹div,設(shè)置position:relative.隱藏視口外的內(nèi)容overflow：hidden；ul設(shè)置position：absolute。li內(nèi)的img設(shè)置左浮動。

js部分：

  • 獲取ul節(jié)點，獲取圖片數(shù)量imgCount、獲取圖片長度imgWidth，聲明pageIndex記錄當前圖片位置。
  • clone第一張圖片添加在圖片列表的最后，clone最后一張圖片添加在圖片列表的最前面，因為在最前面添加了一張圖片，所以需要一個向右圖片寬度的偏移。
  • 獲取圖片列表的寬度，ul內(nèi)的圖片數(shù)量+clone的兩張圖片
  • 定義函數(shù)playNext(len),playPre(len)
  • playNext(): 執(zhí)行該函數(shù)時使用動畫將ul向左偏移一個圖片(假設(shè)len=1)的寬度，動畫結(jié)束后，將pageIndex加1，同時判斷curIndex是否為最后一個圖片(此時顯示的其實是第一個圖片)，如果是的，則將ul定位到真正的第一個圖片的位置(使用css方法的left進行設(shè)置)
  • playPre(): 該函數(shù)與playNext移動的方向相反，執(zhí)行該函數(shù)時，使用動畫將ul向右偏移一個圖片的寬度，動畫結(jié)束后，將pageIndex減1，同時判斷pageIndex是否為第一個圖片(此時顯示的其實是最后一個圖片)，如果是的，則將ul定位到真正的最后一個圖片的位置
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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