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

恍如隔世發表於2019-02-16

之前面試被問到這個問題，之前都是隨便找大神外掛，知道怎麼去做，但是一直沒實現過。

無縫輪播的原理

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

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的值就可以了。

相關文章