之前口试被问到这个题目，之前都是随意找大神插件，晓得怎样去做，然则一向没完成过。

无缝轮播的道理

在转动层前后离别插进去末了一个元素和最前面一个元素，然后在动画滚到末了或许最前的时刻，初始化转动层的位置款式，速率很快，没法发觉，就犹如无缝平常。

html片断

<div class="wrap">
    <ul>
        <li><img src="1.jpg"/></li>
        <li><img src="2.jpg"/></li>
        <li><img src="3.jpg"/></li>
    </ul>
    <a href="javascript:;" class="prevBtn">←</a>
    <a href="javascript:;" class="nextBtn">→</a>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

css款式

.wrap{
    width: 620px;
    height: 413px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border: 5px solid #FFF;
    background: #FFF;
}

ul{
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
}

li{
    width: 620px;
    height: 413px;
    float: left;
    list-style: none;
    box-sizing: border-box;
    border: 5px solid #E0E0E0;
}

img{
    width: 100%;
}

a{
    display: block;
    width: 50px;
    height: 20px;
    background: #CCC;
    color: #FFF;
    font-size: 14px;
    text-align: center;
    position: absolute;
    z-index: 9;
    text-decoration: none;
}

a:first-of-type{
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

a:last-of-type{
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

JS

$(document).ready(function(){
    let index = 1,
        instance = $('li')[0].offsetWidth,
        oldlen = $('li').length;

    // 离别前后插进去末了和最前的元素
    $('ul').append($("li").eq(0).clone()).prepend($("li").eq(oldlen - 1).clone());;

    let len = $('li').length;

    $('ul').css({'width': instance * len + 'px', 'left': -instance + 'px'});

    $('.nextBtn').on('click', function(){

        index++;
        $('ul').stop().animate({'left': -instance * index}, 300, function(){
            // 当滑动到末了(复制到末了的第一张图位置)，等动画完成以后，初始化全部图片转动层容器的位置
            if( index == len - 1 ){
                index = 1;
                $('ul').css({'left': -instance * index + 'px'});
            }
        });
        
    });


    $('.prevBtn').on('click', function(){

        index--;
        $('ul').stop().animate({'left': -instance * index}, 300, function(){
            // 当滑动到前面(复制到最前面的末了一张图位置)，等动画完成以后，初始化全部图片转动层容器的位置
            if( index == 0 ){
                index = len - 2;
                $('ul').css({'left': -instance * index + 'px'});
            }
        });
        
    });

    // 自动播放
    function autoPlay(){

        autoplay = setInterval(function(){

            index++;
            $('ul').stop().animate({'left': -instance * index}, 300, function(){
                if( index == len - 1 ){
                    index = 1;
                    $('ul').css({'left': -instance * index + 'px'});
                }
            });

        }, 3000);    
    };

    autoPlay();

    $('.wrap').hover(function(){
        autoplay && clearInterval(autoplay);
    }, function(){
        autoPlay();
    });


});

备注

关于轮播索引没加上，这个比较轻易，关注index的值就能够了。