效果图：
源代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-3.3.1.js"></script> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } img{ display: block; } .box{ margin: 100px auto; width: 650px; height: 250px; border: 1px solid pink; position: relative; overflow: hidden; } #lbt{ position: absolute; top: 0; left: 0; width: 600%; } #lbt li{ float: left; } .box .disc{ width: 165px; height: 20px; background: rgba(0,0,0,0.5); position: absolute; bottom: 10px; left: 50%; border-radius: 20px; padding: 5px 0 5px 15px; margin-left: -60px; } .disc li{ float: left; width: 20px; height: 20px; line-height: 20px; border: 1px solid #fff; border-radius: 10px; text-align: center; margin-right: 10px; cursor: pointer; color: #fff; } .disc li.current{ background: #fff; color: #000; } </style> <script> $(function () { var timer = setInterval(autoplay,3000); var target=0; var num=0; function autoplay(){ target-=650; num++; $("#lbt").animate({"left":target},1000); $("#disc").children("ul").children("li:eq("+num+")").addClass("current").siblings().removeClass("current"); if(target==-5*650){ target = 0; $("#lbt").animate({"left":target},0); } if(num==4){ num=-1; } } $("#lbt li").mouseenter(function () { clearInterval(timer); }) $("#lbt li").mouseout(function () { clearInterval(timer); timer = setInterval(autoplay,3000); }) }) </script> </head> <body> <div class="box"> <ul id="lbt"> <li><a href="#"><img src="images/01.jpg" alt=""/></a></li> <li><a href="#"><img src="images/02.jpg" alt=""/></a></li> <li><a href="#"><img src="images/03.jpg" alt=""/></a></li> <li><a href="#"><img src="images/04.jpg" alt=""/></a></li> <li><a href="#"><img src="images/05.jpg" alt=""/></a></li> <li><a href="#"><img src="images/01.jpg" alt=""/></a></li> </ul> <div class="disc" id="disc"> <ul> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </body> </html> 图：
图：
