無縫輪播圖的一種方式原理

以前面試被問到這個問題，以前都是隨便找大神插件，知道怎麼去作，可是一直沒實現過。

無縫輪播的原理

在滾動層先後分別插入最後一個元素和最前面一個元素，而後在動畫滾到最後或者最前的時候，初始化滾動層的位置樣式，速度很快，沒法察覺，就如同無縫通常。

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的值就能夠了。