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);

添加鼠標移入移出事件

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:外層的父級 primary:需要滾動的文字 copy:復制的容器 time:滾動速度 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);} }

調用

scroll(bigBox ,primary ,copy ,30)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。