javascript定時(shí)器實(shí)現(xiàn)無縫滾動(dòng)效果

RyanHoo 發(fā)布于2019-08-26 12:12 / 2739人閱讀

摘要：最近學(xué)習(xí)定時(shí)器的相關(guān)知識(shí)，整理定時(shí)器實(shí)現(xiàn)無縫滾動(dòng)的效果。當(dāng)滾動(dòng)超過總長(zhǎng)度的二分之一時(shí)即，將切換到向左滾動(dòng)。

最近學(xué)習(xí)定時(shí)器的相關(guān)知識(shí)，整理定時(shí)器實(shí)現(xiàn)無縫滾動(dòng)的效果。

原理

用定時(shí)器實(shí)現(xiàn)ul滾動(dòng)。

當(dāng)滾動(dòng)超過ul總長(zhǎng)度的二分之一時(shí)（即oUl.offsetLeft<-oUl.offsetWidth/2），將left切換到0（向左滾動(dòng)）。

當(dāng)ul左邊距離大于0的時(shí)候，將left切換到總長(zhǎng)度的一般（即oUl.style.left=-oUl.offsetWidth/2+"px"）。

向左滾動(dòng)的時(shí)候-2

向右滾動(dòng)的時(shí)候+2

代碼實(shí)現(xiàn)




  
  定時(shí)器實(shí)現(xiàn)無縫滾動(dòng)例子




  向左滾動(dòng)
  向右滾動(dòng)

GPU云服務(wù)器云服務(wù)器 javascript無縫滾動(dòng) 無縫滾動(dòng) 水平無縫滾動(dòng) 文字無縫滾動(dòng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108236.html

相關(guān)文章

原生javascript實(shí)現(xiàn)無縫滾動(dòng)

摘要：實(shí)現(xiàn)的無縫滾動(dòng)需要掌握基本的定位和運(yùn)動(dòng)知識(shí)逐步分析圖片的無縫滾動(dòng)是怎么實(shí)現(xiàn)的的基本結(jié)構(gòu)如下樣式要實(shí)現(xiàn)圖片窗口整體的無縫滾動(dòng)我們需要通過定時(shí)器定時(shí)改變的位置，于是我們有下面的片段來實(shí)現(xiàn)對(duì)應(yīng)定時(shí)器時(shí)間段內(nèi)移動(dòng)的距離，指開始這樣做能實(shí)現(xiàn)基本實(shí)現(xiàn)javascript的無縫滾動(dòng)需要掌握基本的定位和運(yùn)動(dòng)知識(shí)逐步分析圖片的無縫滾動(dòng)是怎么實(shí)現(xiàn)的HTML的基本結(jié)構(gòu)如下 ...

VPointer 2019-08-22 11:11 評(píng)論0 收藏0
vue無縫滾動(dòng)的插件開發(fā)填坑分享

摘要：寫插件的初衷項(xiàng)目經(jīng)常需要無縫滾動(dòng)效果，當(dāng)時(shí)寫的時(shí)候用用這個(gè)老插件，相對(duì)不上很好用。后來轉(zhuǎn)向在沒有找到好的無縫滾動(dòng)插件，除了配置可以實(shí)現(xiàn)但是相對(duì)來說太重了，于是自己造了個(gè)輪子。寫插件的初衷 1.項(xiàng)目經(jīng)常需要無縫滾動(dòng)效果，當(dāng)時(shí)寫jq的時(shí)候用用msClass這個(gè)老插件，相對(duì)不上很好用。2.后來轉(zhuǎn)向vue在vue-awesome沒有找到好的無縫滾動(dòng)插件，除了配置swiper可以實(shí)現(xiàn)但是相對(duì)來...

岳光 2019-08-22 14:04 評(píng)論0 收藏0
javascript簡(jiǎn)單輪播圖

摘要：輪播圖實(shí)現(xiàn)原理通過多張圖片平鋪，用只顯示一張圖片其他的隱藏，無縫滾動(dòng)用定時(shí)器改變?cè)氐闹底寛D片呈現(xiàn)左右滾動(dòng)的效果。 **輪播圖實(shí)現(xiàn)原理：通過多張圖片平鋪，用overflow:hidden只顯示一張圖片、其他的隱藏，無縫滾動(dòng)用定時(shí)器改變?cè)氐膌eft值讓圖片呈現(xiàn)左右滾動(dòng)的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

lk20150415 2019-08-02 15:58 評(píng)論0 收藏0
javascript簡(jiǎn)單輪播圖

摘要：輪播圖實(shí)現(xiàn)原理通過多張圖片平鋪，用只顯示一張圖片其他的隱藏，無縫滾動(dòng)用定時(shí)器改變?cè)氐闹底寛D片呈現(xiàn)左右滾動(dòng)的效果。 **輪播圖實(shí)現(xiàn)原理：通過多張圖片平鋪，用overflow:hidden只顯示一張圖片、其他的隱藏，無縫滾動(dòng)用定時(shí)器改變?cè)氐膌eft值讓圖片呈現(xiàn)左右滾動(dòng)的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

peixn 2019-08-21 17:48 評(píng)論0 收藏0
javascript簡(jiǎn)單輪播圖

摘要：輪播圖實(shí)現(xiàn)原理通過多張圖片平鋪，用只顯示一張圖片其他的隱藏，無縫滾動(dòng)用定時(shí)器改變?cè)氐闹底寛D片呈現(xiàn)左右滾動(dòng)的效果。 **輪播圖實(shí)現(xiàn)原理：通過多張圖片平鋪，用overflow:hidden只顯示一張圖片、其他的隱藏，無縫滾動(dòng)用定時(shí)器改變?cè)氐膌eft值讓圖片呈現(xiàn)左右滾動(dòng)的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

liuhh 2019-08-29 13:53 評(píng)論0 收藏0