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

BicycleWarrior 发布于2019-08-02 10:06 / 2089人阅读

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

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

无缝轮播的原理

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

html片段

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%);
}

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

云服务器 GPU云服务器轮播图写轮播图将轮播图 php轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52123.html

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

摘要：无缝轮播的原理在滚动层前后分别插入最后一个元素和最前面一个元素，然后在动画滚到最后或者最前的时候，初始化滚动层的位置样式，速度很快，无法察觉，就如同无缝一般。之前面试被问到这个问题，之前都是随便找大神插件，知道怎么去做，但是一直没实现过。无缝轮播的原理在滚动层前后分别插入最后一个元素和最前面一个元素，然后在动画滚到最后或者最前的时候，初始化滚动层的位置样式，速度很快，无法察觉，就...

MudOnTire 2019-08-30 14:23 评论0 收藏0
无缝轮播图的一种方式原理

摘要：无缝轮播的原理在滚动层前后分别插入最后一个元素和最前面一个元素，然后在动画滚到最后或者最前的时候，初始化滚动层的位置样式，速度很快，无法察觉，就如同无缝一般。之前面试被问到这个问题，之前都是随便找大神插件，知道怎么去做，但是一直没实现过。无缝轮播的原理在滚动层前后分别插入最后一个元素和最前面一个元素，然后在动画滚到最后或者最前的时候，初始化滚动层的位置样式，速度很快，无法察觉，就...

AlienZHOU 2019-08-22 16:01 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

MSchumi 2019-08-02 16:03 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

hatlonely 2019-08-22 18:09 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

褰辩话 2019-08-30 15:53 评论0 收藏0