<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现问题滚动</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <style> *{ padding:0; margin: 0; } ul,li{ list-style: none; } .box{ width: 300px; height: 20px; overflow: hidden; background-color: black; position: relative; } .box .list{ width: 300px; height: auto; position: absolute; } .box .list li{ width: 300px; height: 20px; line-height: 20px; color: red; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .box2{ width: 600px; height:20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } </style> <body> <div class="box"> <ul class="list" data="0"> <li>这期老板很实在呀，另外应该锅底或者别的什么费用，我还点了一些收费的东西，所以老板不会亏的(⌒▽⌒)</li> <li>《AKB少女90天的挑战》第七期正式上线！魏新回上海参加拍摄工作，瑞希迎来了难得的休假日，她们分别度过了怎样的一天呢？</li> <li>感冒没好利索，再加上“服务员”临时有事，直播顺延至明天，万请见谅</li> </ul> </div> <div class="box2"> <div class="font">《AKB少女90天的挑战》第七期正式上线！魏新回上海参加拍摄工作，瑞希迎来了难得的休假日，她们分别度过了怎样的一天呢？</div> </div> <script> $(function(){ setInterval("font_auto();",3000); }); function font_auto(){ var num = $(".box .list").attr("data"); num ++ ; if(num > $(".box .list li").length-1){ num = 0; } $(".box .list").attr("data",num); $('.box .list').animate({'top':-20*num}); } </script> </body> </html>