实现跑马灯效果的JS很多，但是很多不好用，下面介绍一个比较好用的。
效果图：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="js/jquery-3.6.0.js"></script> <style> #kefu{ width: 500px; height: 500px; margin: 0 auto; overflow: hidden; background-color: rgba(1, 1, 1, 0.2); } ul{ width: 500px; height: 500px; display: flex; justify-content: space-between; } li{ list-style-type: none; } li p{ color: #ff0000; font-size: 120%; width: 400px; height: 90px; } </style> </head> <body> <div id="kefu"> <ul> <li> <p>1.线路一</p> <p>2.线路二</p> <p>3.线路三</p> <p>4.线路四</p> <p>5.线路五</p> <li> <p>45</p> <p>25</p> <p>42</p> <p>12</p> <p>16</p> </li> </ul> </div> <script> $.fn.scrollTop = function(options) { var defaults = { speed: 40 } var opts = $.extend(defaults, options); this.each(function() { var $timer; var scroll_top = 0; var obj = $(this); var $height = obj.find("ul").height(); obj.find("ul").clone().appendTo(obj); $timer = setInterval(function() { scroll_top++; if (scroll_top > $height) { scroll_top = 0; } obj.find("ul").first().css("margin-top", -scroll_top); }, opts.speed); }) } $("#kefu").scrollTop({ speed: 20 //数值越大 速度越慢 }); </script> </body> </html>
