You put the first picture clone at the end

I wrote one using jquery, you can refer to it

//初始化变量 var i=0,timer; //为pic追加第一张图片到末尾 var clone=$(".pic li").first().clone(); $(".pic").append(clone); var size=$(".pic>li").size(); console.log(size); //动态增加按钮列表 for(var j=0;j"); } $(".btn>li").eq(0).addClass("current"); //实现按钮点击切换效果 $(".btn>li").click(function(){ i=$(this).index(); $(".btn>li").eq(i).addClass("current").siblings().removeClass("current"); $(".pic").stop().animate({"left":-i*520},200); }); //设置播放函数 function play(){ if(i==size){ $(".pic").css({"left":0}); i=1; } if(i==-1){ $(".pic").css({"left":-(size-1)*520},200); i=size-2; } $(".pic").stop().animate({"left":-i*520},200); if(i==size-1){ $(".btn>li").eq(0).addClass("current").siblings().removeClass("current"); }else{ $(".btn>li").eq(i).addClass("current").siblings().removeClass("current"); } } //设置自动播放 function autoplay(){ timer=setInterval(function(){ i++; play(); },1000); } $(".contain").hover(function(){ clearInterval(timer); },function(){ autoplay(); }); setTimeout(autoplay(),1000); //设置左侧点击按钮事件 $(".arrow1").click(function(){ i++; play(); }); $(".arrow2").click(function(){ i--; play(); });

Effect display:

https://ityanxi.github.io/seg...

You can search it on the site. In fact, many people have asked about it. The principle is visual deception, similar to the structure of 5,1,2,3,4,5,1. When we get to the fifth picture, we have to return to 1. First, we scroll to the rightmost 1 according to the animation. At the transitionend Instantly adjust the position so that the 1 on the left replaces the current 1. To put it simply, the position of the 1 on the right is -1920px, and the position of the 1 on the left is 0px. Just when the carousel reaches -1920px, the position is instantly adjusted to 0px, thus achieving the purpose of visual deception. The same goes for 1 to 5, just change the direction