html代碼

<div><ul id="ul1"><li>1111111111</li><li>2222222222</li><li>3333333333</li><li>4444444444</li><li>5555555555</li><li>6666666666</li><li>7777777777</li><li>8888888888</li><li>9999999999</li></ul><ul id="ul2"></ul> </div>

css代碼

*{padding:0;margin:0 } div{height: 100px;width: 200px;border: 1px solid greenyellow;overflow: hidden; }

js代碼

var bigBox = document.querySelector('div') var primary = document.querySelector('#ul1') var copy = document.querySelector('#ul2') var num = 0 copy.innerHTML = primary.innerHTML; bigBox.scrollTop = 0; var timer = setInterval(function () {if(bigBox.scrollTop >= primary.scrollHeight){bigBox.scrollTop = 0;num = 0}else{num++bigBox.scrollTop = num;} },30);

添加鼠標(biāo)移入移出事件

bigBox.onmouseover = function(){clearInterval(timer);}bigBox.onmouseout = function(){timer = setInterval(function () {if(bigBox.scrollTop >= primary.scrollHeight){bigBox.scrollTop = 0;num = 0}else{num++bigBox.scrollTop = num;}},30);}

封裝

// bigBox:外層的父級(jí) primary:需要滾動(dòng)的文字 copy:復(fù)制的容器 time:滾動(dòng)速度 function scroll(bigBox,primary,copy,time) {var num = 0copy.innerHTML = primary.innerHTML;bigBox.scrollTop = 0;var timer = setInterval(function () {if(bigBox.scrollTop >= primary.scrollHeight){bigBox.scrollTop = 0;num = 0}else{num++bigBox.scrollTop = num;}},time);bigBox.onmouseover = function(){clearInterval(timer);}bigBox.onmouseout = function(){timer = setInterval(function () {if(bigBox.scrollTop >= primary.scrollHeight){bigBox.scrollTop = 0;num = 0}else{num++bigBox.scrollTop = num;}},time);} }

調(diào)用

scroll(bigBox ,primary ,copy ,30)

總結(jié)

以上是生活随笔為你收集整理的js实现文字无限滚动轮播的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。