js文字无限循环向上滚动轮播
<!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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库