<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet"> <title>滚动文字</title> <style> * { margin: 0; padding: 0; } ul, li { list-style: none; display: block; } #scrollBox { height: 150px; width: 300px; margin: 100px auto; background: red; overflow: hidden; color: #fff; } #scrollBox #con1, #con2 { width: 280px; float: left; } #scrollBox li { height: 15px; line-height: 15px; text-align: center; margin-bottom: 15px } </style> </head> <body> <div id="scrollBox"> <ul id="con1"> <li> 1、浓雾 犹如波纹般散开</li> <li> 2、我多像是 一颗粒子醒来</li> <li> 3、无止境的水域</li> <li> 4、旋转在其中的银河</li> <li> 5、只留下了一道沉默的白</li> <li> 6、四周 是否从未有谁在</li> </ul> <ul id="con2"></ul> </div> <script> var box = document.getElementById("scrollBox"); var con1 = document.getElementById("con1"); var con2 = document.getElementById("con2"); con2.innerHTML = con1.innerHTML; var liLen = con1.getElementsByTagName('li'); console.log('liLen ', liLen); console.log('liLen ', liLen.length); function scrollUp() { if (box.scrollTop >= con1.offsetHeight) { box.scrollTop = 0; } else { box.scrollTop++; } } // 大于6条数据 开始滚动 if (liLen.length > 5) { var time = 50; var mytimer = setInterval(scrollUp, time); box.onmouseover = function () { clearInterval(mytimer); }; box.onmouseout = function () { mytimer = setInterval(scrollUp, time); }; } </script> </body> </html>标签:box,con1,con2,滚动,轮播,liLen,js,scrollBox,var From: https://www.cnblogs.com/j-a-h/p/18347250