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

AlienZHOU 發布于2019-08-22 16:01 / 2295人閱讀

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

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

無縫輪播的原理

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

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輪播圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93962.html

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

摘要：無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素，然后在動畫滾到最后或者最前的時候，初始化滾動層的位置樣式，速度很快，無法察覺，就如同無縫一般。之前面試被問到這個問題，之前都是隨便找大神插件，知道怎么去做，但是一直沒實現過。無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素，然后在動畫滾到最后或者最前的時候，初始化滾動層的位置樣式，速度很快，無法察覺，就...

MudOnTire 2019-08-30 14:23 評論0 收藏0
無縫輪播圖的一種方式原理

摘要：無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素，然后在動畫滾到最后或者最前的時候，初始化滾動層的位置樣式，速度很快，無法察覺，就如同無縫一般。之前面試被問到這個問題，之前都是隨便找大神插件，知道怎么去做，但是一直沒實現過。無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素，然后在動畫滾到最后或者最前的時候，初始化滾動層的位置樣式，速度很快，無法察覺，就...

BicycleWarrior 2019-08-02 10:06 評論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