<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script></head><style> ???ul, ???li { ?????margin: 0; ?????padding: 0; ???} ???.content { ??????width: 1020px; ?????height: 60px; ?????overflow: hidden; ??????border: #4e83c2 solid 1px; ??????margin:50px auto; ???} ???.content ul{ ?????display: flex; ?????flex-direction: row; ?????width: 100%; ??????overflow: hidden; ???} ???.content ul li { ?????width: 400px; ??????height:80px; ?????margin: 20px; ?????list-style: none; ???}</style><body><div class="content"><ul> ?<li>1</li> ?<li>2</li> ?<li>3</li> ?<li>4</li> ?<li>5</li> ?<li>6</li> ?<li>7</li> ?<li>8</li> ?<li>9</li> ?<li>10</li> ?<li>11</li> ?<li>12</li> ?<li>13</li> ?<li>14</li> ?<li>15</li> ?<li>16</li> ?<li>17</li> ?<li>18</li></ul></div></body></html><script> ?window.onload = function () { ???function scroll(){ ???$(".content ul").animate({"margin-left":"-300px"},function(){ ???????$(".content ul li:eq(0)").appendTo($(".content ul")) ???????$(".content ul").css({"margin-left":0}) ???}) ???} ?????setInterval(scroll,2000) ?}</script>jQuery 实现无缝滚动
原文地址：https://www.cnblogs.com/muqiao/p/9711211.html