效果图：
全部代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0;padding: 0} #box{height: 140px; border: solid 1px; overflow: hidden;} </style> </head> <body> <div id="box"> <ul id="ul1"> <li>1111111111111111111111</li> <li>2222222222222222222222</li> <li>3333333333333333333333</li> <li>4444444444444444444444</li> <li>5555555555555555555555</li> <li>6666666666666666666666</li> <li>7777777777777777777777</li> <li>8888888888888888888888</li> <li>9999999999999999999999</li> </ul> <ul id="ul2"></ul> </div> <script> window.onload = roll(50); function roll(t) { var ul1 = document.getElementById("ul1"); var ul2 = document.getElementById("ul2"); var box = document.getElementById("box"); ul2.innerHTML = ul1.innerHTML; box.scrollTop = 0; var timer = setInterval(rollStart, t); box.onmouseover = function () { clearInterval(timer) } box.onmouseout = function () { timer = setInterval(rollStart, t); } } function rollStart() { if (box.scrollTop >= ul1.scrollHeight) { box.scrollTop = 0; } else { box.scrollTop++; } } </script> </body> </html>