<!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> .b2{ width: 200px; height: 200px; margin: 44px auto 0; position: relative; overflow: hidden; background-color: gray; } .b2 .b2list{ width: 600px; height: 200px; position: absolute; top: 0; left: 0; } .b2 .item{ width: 200px; height: 200px; float: left; } .b2 .item:nth-child(1) { background-image: url("https://ximg.2cq.com/img/system/ad/tieba/7665cfeb1b50e560693509b7a4045861.jpeg"); background-size: 200px 200px; } .b2 .item:nth-child(2){ background-image: url("https://ximg.2cq.com/img/system/ad/tieba/ee34f88f37b317849cc0e80076b89bab.jpeg"); background-size: 200px 200px; } .b2 .item:nth-child(3){ background-image: url("https://ximg.2cq.com/img/system/ad/tieba/1c9b819f1b9ede319e8e1b8ba63066e8.jpeg"); background-size: 200px 200px; } </style> <body> <div class="b2"> <div class="b2list" data="0"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </div> <script> $(function(){ setInterval("auto_left_me();",3000); }); function auto_left_me(){ var num = $(".b2 .b2list").attr("data"); num++; if(num>2){ num=0; } $(".b2 .b2list").attr("data",num); $('.b2 .b2list').animate({'left':-200*num}); } </script> </body> </html>