无缝轮播图的一种方式原理

Posted 2020-11-23 baimeishaoxia

之前面试被问到这个问题，之前都是随便找大神插件，知道怎么去做，但是一直没实现过。

无缝轮播的原理

在滚动层前后分别插入最后一个元素和最前面一个元素，然后在动画滚到最后或者最前的时候，初始化滚动层的位置样式，速度很快，无法察觉，就如同无缝一般。

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