核心思想：第一张图片和最后一张图片保持一致，当轮播到最后一张时快速跳转到第一张。
<div class="outGroup"> <ul class="ulGroup"> <li class="liImg"> <img src="https://ossweb-img.qq.com/upload/adw/image/20191029/e66800e36e8e2d0c3e2ab4d9b41fca60.jpeg"> </li> <li class="liImg"> <img src="https://ossweb-img.qq.com/upload/adw/image/20191101/3559501f2ddbc1d131fad30b43843c18.jpeg"> </li> <li class="liImg"> <img src="https://ossweb-img.qq.com/upload/adw/image/20191101/ffc1a3ffd4e9e0823d1fa03fb73fcdb8.jpeg"> </li> <li class="liImg"> <img src="https://ossweb-img.qq.com/upload/adw/image/20191101/5078cdc0d50bb7e79cce28167e27d2e8.jpeg"> </li> <li class="liImg"> <img src="https://ossweb-img.qq.com/upload/adw/image/20191012/1c915edd6577445d6286c22105a6e389.jpeg"> </li> <li class="liImg"> <img src="https://ossweb-img.qq.com/upload/adw/image/20191029/e66800e36e8e2d0c3e2ab4d9b41fca60.jpeg"> </li> </ul> <ul class="btnGroup"> <!-- <li></li> <li></li> <li></li> <li></li> <li></li> --> </ul> </div> *{ margin: 0px; padding: 0px; } .outGroup{ width: 820px; margin: 150px auto; position: relative; overflow: hidden; } li{ list-style: none; float: left; } .btnGroup{ position: absolute; left: 50%; bottom: 8px; margin-left: -50px; z-index: 99; } .btnGroup li{ float: left; width: 15px; height: 15px; border-radius: 50%; background-color: rgba(255,255,255,0.5); margin-left: 5px; } <script type="text/javascript" src="jQuery/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function(){ //根据图片数量动态设置轮播图的宽度 var lengthli = $(".liImg").length; $(".ulGroup").css("width", lengthli * 820); //设置小点 var liNum = ""; for(var i =0; i < lengthli - 1; i++){ liNum += "<li class='anli'></li>"; } $(".btnGroup").html(liNum); //默认第一个按钮的颜色为红色 $(".anli")[0].style.backgroundColor = "red"; //点击按钮控制轮播 for(var i=0; i < lengthli - 1; i++){ $(".anli")[i].num=i; $(".anli")[i].onclick = function(){ //点击就关闭定时器，为了防止index标识发生冲突 clearInterval(timer); timer = null; $(".ulGroup").animate({marginLeft:-820 * this.num}, 1000, function(){ if(!timer){ lunbo(); } }); //轮播到那个图片，相对应到按钮颜色变成red，在这之前要先把所有到按钮颜色设置为初始颜色 $(".anli").css("backgroundColor","rgba(255,255,255,0.5)"); $(".anli")[this.num].style.backgroundColor = "red"; index = this.num + 1; } } //通过animate和定时器实现无限轮播 var index = 1; var timer = null; function lunbo(){ timer = setInterval(function(){ $(".ulGroup").animate({marginLeft:-820 * index}, 1000, function(){ index++; index %=lengthli; if(index == 0){ index = 1; $(".ulGroup").css("marginLeft", 0); } //轮播到那个图片，相对应到按钮颜色变成red，在这之前要先把所有到按钮颜色设置为初始颜色 $(".anli").css("backgroundColor","rgba(255,255,255,0.5)"); $(".anli")[index-1].style.backgroundColor = "red"; }); },3000); } lunbo(); }); </script>