<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动跑马灯</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <style> *{ margin:0; padding:0; } ul li{ list-style:none; } .main{ width: 300px; height:100px; margin:100px auto; position: relative; overflow: hidden; } .main li{ float: left; width:100px; height:100px; } .main ul{ width:300px; height:100px; position: absolute; left:0; top:0; } .main li:nth-child(odd){ background-color: red; } .main li:nth-child(even){ background-color: blue; } </style> <body> <div class="main"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <script> $(".main ul").append($(".main ul").html()); $(".main ul").width($(".main ul").width()*2); $(function(){ setInterval("my_left();",10); }); var left = 0; function my_left(){ left -= 20; if(left <= -300){ left = 0; } console.log(left); $('.main ul').animate({'left':left}); } </script> </body> </html>