你把第一张图片 克隆 放在最后面

我用jquery写了一个 你可以参考一下

//初始化变量
    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<size-1;j++){
        $(".btn").append("<li></li>");
    }
    $(".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();
    });
    
    

效果展示：

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

你可以在站内搜一下，其实有很多人问过了。原理就是视觉欺骗，类似 5,1,2,3,4,5,1这样的结构，我们到第5张图的时候要回到1，首先按照动画滚动到最右边那个1，在transitionend的时候瞬间调整位置让左边的那个1替代当前的这个1. 简单点讲就是右边的那个1的位置为 -1920px,左边那个1的位置为0px。就是在轮播到-1920px的时候瞬间将位置调整为0px，这样就达到了视觉欺骗的目的。同理1到5也是一样的，换个方向而已