邏輯難理解版本的輪播圖(實現無縫滾動)

weixin_34253539發表於2019-02-24

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .container{
            width: 500px;
            height: 300px;
            position: relative;
            margin: 100px auto;
            border: 3px solid #ccc;
            overflow: hidden;
        }
        .swiper{
            position: absolute;
            left: 0;
            top: 0;
            width: 2000px;
            height: 300px;
        }
        .swiper .item{
            width: 500px;
            height: 300px;
            float: left;
        }
        .pagenation{
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
        }
        .pagenation li{
            width: 20px;
            height: 20px;
            margin: 0 20px;
            background: #ccc;
            float: left;
            border-radius: 50%; 
        }
        .pagenation li.select{
            background: black;
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <div class="swiper" id="swiper">
            <div class="item" style="background: blue;" data-index="0">1</div>
            <div class="item" style="background: red;" data-index="1">2</div>
            <div class="item" style="background: yellow;" data-index="2">3</div>
            <div class="item" style="background: green;" data-index="3">4</div>
        </div>
        <ul class="pagenation" id="pagenation">
            <li class="select"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="utils.js"></script>
    <script src="animate.js"></script>
    <script>
        var container = document.getElementById("container");
        var swiper = document.getElementById("swiper");
        var items = swiper.getElementsByClassName("item");
        var pagenation = document.getElementById("pagenation");
        var oLis = pagenation.getElementsByTagName("li");
        var itemW = 500;

        var step = 1;

        // clone元素，
        swiper.appendChild(items[0].cloneNode(true)); // 降低一個圖片克隆放到了末尾
        swiper.insertBefore(items[items.length-2].cloneNode(true), items[0]);
        swiper.style.width = items.length*itemW + "px";
        swiper.style.left = -step*itemW + "px";

        // 1、自動輪播的功能
        var timer = setInterval(function(){
            step++;
            // if(step >= 4){
            //     step = 0;
            // }
            // swiper.style.left = -step*itemW + "px";

            // for(let i = 0; i < oLis.length; i++){
            //     oLis[i].classList.remove("select");
            // }
            // oLis[step].classList.add("select");
            renderImg(); // 切換圖片的方法
            renderPagenation(); // 切換小遠點
        }, 2000)

        // 2、滑鼠畫上停止動畫，移開繼續動畫
        container.onmouseover = function(){
            clearInterval(timer);
        };
        container.onmouseout = function(){
            timer = setInterval(function(){
                step++;
                renderImg(); // 切換圖片的方法
                renderPagenation(); // 切換小遠點
            }, 2000)
        };

        // 3、小圓點和圖片聯動
        for(let i = 0; i < oLis.length; i++){
            oLis[i].onclick = function(){
                step = i + 1;
                renderImg(); // 切換圖片的方法
                renderPagenation(); // 切換小遠點
            }
        }

        // 渲染圖片
        function renderImg(){
            if(step > 5){
                step = 1;
                swiper.style.left = -step*itemW+"px";
                step++;
            }
            zfAnimate(swiper, {left: -step*itemW}, 1000);
            // swiper.style.left = -step*itemW+"px";
        };
        // 渲染小圓點
        function renderPagenation(){
            var index = null; // 先遠點的索引
            // 1、圖片的索引-1等於小圓點的索引（所引值1-4）
            if(step>=1 && step <= 4){
                index = step-1; // 小圓點
            }
            // 2、圖片索引length-1，小圓點的索引是0；
            if(step == 5){
                index = 0;
            }
            // 3、圖片索引是0，小圓點是最大的索引
            if(step == 0){
                index = 3;
            }

            for(let i = 0; i < oLis.length; i++){
                oLis[i].classList.remove("select");
            }
            oLis[index].classList.add("select");
        }
    </script>
</body>
</html>
複製程式碼

banner.json

[
  {
    "id": 1,
    "img": "img/banner1.jpg",
    "desc": "程式碼就是詩和遠方",
    "src": "http://www.baidu.com/"
  },
  {
    "id": 2,
    "img": "img/banner2.jpg",
    "desc": "把握自己 把握現在",
    "src": "http://www.baidu.com/"
  },
  {
    "id": 3,
    "img": "img/banner3.jpg",
    "desc": "把握未來，掌握先機",
    "src": "http://www.baidu.com/"
  },
  {
    "id": 4,
    "img": "img/banner4.jpg",
    "desc": "多的是你不知道的事兒",
    "src": "http://www.baidu.com/"
  }
]
複製程式碼

圖片自己搞

utils.js

var utils = (function () {
    function offset(curEle) {
        var  l = curEle.offsetLeft;
        var  t = curEle.offsetTop;
        var p = curEle.offsetParent;
        while(p.nodeName !=="BODY"){
            l+=p.offsetLeft +p.clientLeft;
            t+=p.offsetTop+p.clientTop;
            p = p.offsetParent;
        }
        return {
            left:l,top:t
        }
    };
    function getCss(curEle,attr) {
        var  val;
        if("getComputedStyle" in window){
            // 先判斷是否支援getComputedStyle;
            val = getComputedStyle(curEle)[attr];
        }else{
            val = curEle.currentStyle[attr];
        }
        // 去單位
        var reg = /^(width|height|margin|padding|left|top|right|bottom|fontZise|opacity)$/;
        // 校驗當前屬性是否帶有單位
        if(reg.test(attr)){
            // 判斷是否為空；
            if(!isNaN(parseFloat(val))){
                val = parseFloat(val);
            }
        }
        return val;
    }
// setCss : 每執行一次，都會設定元素一個屬性樣式；
    function setCss(curEle,attr,val) {
        var  reg = /^(width|height|top|left|right|bottom|padding|margin)$/;
        if(reg.test(attr)){
            if(typeof val==="number"){
                val = val + "px";
            }
        }
        curEle.style[attr]=val;// 設定行內樣式；
    }
    function setGroupCss(curEle,obj) {
        // 遍歷obj;呼叫封裝的setCss，設定元素的單個樣式；
        for(var key in obj){
            setCss(curEle,key,obj[key])
        }
    }
    function css(...arg) {// 在函式定義的括號中，... 是剩餘運算子；將所有的實參放入到一個陣列中；
        //
        if(arg.length===3){
            // [oBox,"height",300]
            setCss(...arg);
        }else if(arg.length===2){
            if(toString.call(arg[1])==="[object Object]"){
                setGroupCss(...arg)
            }else{
                return getCss(...arg)
            }
        }
    }
    function win(attr,val) {
        // 如果是兩個實參，那麼一定是設定；如果是一個實參，是獲取；
        if(val===undefined){
            return document.documentElement[attr] || document.body[attr];
        }
        document.documentElement[attr] = val;
        document.body[attr] = val;


    }
    return {
        offset:offset,
        getCss:getCss,
        setCss:setCss,
        setGroupCss:setGroupCss,
        css:css,
        win:win
    }
})();
// 單例模式
/*
var utils= {
    offset:function offset(curEle) {
        var  l = curEle.offsetLeft;
        var  t = curEle.offsetTop;
        var p = curEle.offsetParent;
        while(p.nodeName !=="BODY"){
            l+=p.offsetLeft +p.clientLeft;
            t+=p.offsetTop+p.clientTop;
            p = p.offsetParent;
        }
        return {
            left:l,top:t
        }
    }
}*/

複製程式碼

animate.js

(function () {
    // 運動方式
    var zhufengEffect = {
        // 勻速運動公式
        Linear: function (t, b, c, d) {
              return t/d * c + b;
        },
        //指數衰減的反彈緩動
        Bounce: {
            easeIn: function(t, b, c, d) {
                return c - zhufengEffect.Bounce.easeOut(d - t, 0, c, d) + b;
            },
            easeOut: function(t, b, c, d) {
                if ((t /= d) < (1 / 2.75)) {
                    return c * (7.5625 * t * t) + b;
                } else if (t < (2 / 2.75)) {
                    return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
                } else if (t < (2.5 / 2.75)) {
                    return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
                } else {
                    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
                }
            },
            easeInOut: function(t, b, c, d) {
                if (t < d / 2) {
                    return zhufengEffect.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
                }
                return zhufengEffect.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
            }
        },
        //二次方的緩動
        Quad: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t + b;
            },
            easeOut: function(t, b, c, d) {
                return -c * (t /= d) * (t - 2) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t + b;
                }
                return -c / 2 * ((--t) * (t - 2) - 1) + b;
            }
        },
        //三次方的緩動
        Cubic: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return c * ((t = t / d - 1) * t * t + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t * t + b;
                }
                return c / 2 * ((t -= 2) * t * t + 2) + b;
            }
        },
        //四次方的緩動
        Quart: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return -c * ((t = t / d - 1) * t * t * t - 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t * t * t + b;
                }
                return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
            }
        },
        //五次方的緩動
        Quint: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t * t * t * t + b;
                }
                return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
            }
        },
        //正弦曲線的緩動
        Sine: {
            easeIn: function(t, b, c, d) {
                return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
            },
            easeOut: function(t, b, c, d) {
                return c * Math.sin(t / d * (Math.PI / 2)) + b;
            },
            easeInOut: function(t, b, c, d) {
                return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
            }
        },
        //指數曲線的緩動
        Expo: {
            easeIn: function(t, b, c, d) {
                return (t == 0)
                    ? b
                    : c * Math.pow(2, 10 * (t / d - 1)) + b;
            },
            easeOut: function(t, b, c, d) {
                return (t == d)
                    ? b + c
                    : c * (-Math.pow(2, -10 * t / d) + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if (t == 0)
                    return b;
                if (t == d)
                    return b + c;
                if ((t /= d / 2) < 1)
                    return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
            }
        },
        //圓形曲線的緩動
        Circ: {
            easeIn: function(t, b, c, d) {
                return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
            },
            easeOut: function(t, b, c, d) {
                return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
                }
                return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
            }
        },
        //超過範圍的三次方緩動
        Back: {
            easeIn: function(t, b, c, d, s) {
                if (s == undefined)
                    s = 1.70158;
                return c * (t /= d) * t * ((s + 1) * t - s) + b;
            },
            easeOut: function(t, b, c, d, s) {
                if (s == undefined)
                    s = 1.70158;
                return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
            },
            easeInOut: function(t, b, c, d, s) {
                if (s == undefined)
                    s = 1.70158;
                if ((t /= d / 2) < 1) {
                    return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
                }
                return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
            }
        },
        //指數衰減的正弦曲線緩動
        Elastic: {
            easeIn: function(t, b, c, d, a, p) {
                if (t == 0)
                    return b;
                if ((t /= d) == 1)
                    return b + c;
                if (!p)
                    p = d * .3;
                var s;
                !a || a < Math.abs(c)
                    ? (a = c, s = p / 4)
                    : s = p / (2 * Math.PI) * Math.asin(c / a);
                return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            },
            easeOut: function(t, b, c, d, a, p) {
                if (t == 0)
                    return b;
                if ((t /= d) == 1)
                    return b + c;
                if (!p)
                    p = d * .3;
                var s;
                !a || a < Math.abs(c)
                    ? (a = c, s = p / 4)
                    : s = p / (2 * Math.PI) * Math.asin(c / a);
                return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
            },
            easeInOut: function(t, b, c, d, a, p) {
                if (t == 0)
                    return b;
                if ((t /= d / 2) == 2)
                    return b + c;
                if (!p)
                    p = d * (.3 * 1.5);
                var s;
                !a || a < Math.abs(c)
                    ? (a = c, s = p / 4)
                    : s = p / (2 * Math.PI) * Math.asin(c / a);
                if (t < 1)
                    return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
            }
        }

    };

    /**
     *
     * @param curEle 當前執行動畫的元素
     * @param target 目標值物件 {left:500,top:300}
     * @param duration 總過渡時間 2000ms
     */
    // effect 指定運動方式 傳參
    // 傳一個數字
    // 傳一個陣列 ['Quad','easeInOut']
    function move(curEle, target, duration,effect, callBack) {
        // 預設運動方式
        var tempEffect = zhufengEffect.Linear;

        // 判斷effect 如果是個數字
        if(typeof effect === "number") {
            switch (effect) {
                case 0:
                    tempEffect = zhufengEffect.Linear;
                    break;
                case 1:
                    tempEffect = zhufengEffect.Quad.easeInOut;
                    break;
                case 2:
                    tempEffect = zhufengEffect.Bounce.easeIn;
                    break;
                case 3:
                    tempEffect = zhufengEffect.Cubic.easeInOut;
                    break;
            }
        } else if(effect instanceof Array) {
            //如果以陣列方式指定遠動方式 ['Quad','easeInOut']
            tempEffect = effect.length === 2? zhufengEffect[effect[0]][effect[1]]:zhufengEffect[effect[0]];
        } else if(typeof effect === "function") {
            callBack = effect;
        }
        // 執行本次動畫之前 清除上次動畫
        curEle.zfTimer? clearInterval(curEle.zfTimer) : null;

        var begin = {}; // 儲存元素執行動畫前 相應屬性初始狀態
        var change = {}; // 儲存元素執行動畫 相應屬性狀態變化值
        for(var key in target) {
            // target  物件 目標位置
            if(target.hasOwnProperty(key)) {
                // begin {'left': 'left初始值'}
                begin[key] =Number(utils.css(curEle, key));// 獲取屬性初始值，在obj新增key屬性，初始值賦值給begin的key的屬性值
                // change {'left': 'left變化值'}
                console.log(begin[key]);//獲取的透明度的
                change[key] =target[key] - begin[key]// key屬性要變化的值，並且放在change物件中
                console.log(change[key]);
            }
        }
        // console.log(begin);
        // console.log(change);

        var time = null; // 記錄當前時間
        curEle.zfTimer = setInterval(function () {
            time += 10;
            if(time >= duration) { // 結束條件
                // target：{left: 500, top: 300}
                utils.css(curEle,target); // 確保是目標狀態
                clearInterval(curEle.zfTimer); //結束動畫
                typeof callBack ==="function"? callBack.call(curEle) : null;
                return;
            }
            // 計算出當前時間 元素相應屬性 的狀態
            // target 有多少個屬性 zfEffect.Linear 執行多少次 並且把相應屬性的引數傳遞進去 計算出 當前狀態
            // 第一次的時候 key 是left  第二次的時候key 是 top
            for(var key in target) {
               if(target.hasOwnProperty(key)) {
                   // 計算出 當前時間time 元素相應屬性 所處狀態
                   var curPos = tempEffect(time,begin[key],change[key], duration);
                   // 將當前元素 相應屬性 設定為 當前計算出來的狀態curPos
                   utils.css(curEle, key, curPos);
               }
            }
        }, 10);
    }
//   把函式放進全域性下的zfAnimate
   window.zfAnimate = move;

})();
複製程式碼

JQuery實現圖片輪播無縫滾動
2022-06-28
jQuery
react無縫滾動輪播圖
2018-07-22
React
左右無縫輪播圖的實現
2016-04-29
js、jQuery實現文字上下無縫輪播、滾動效果
2018-06-29
JSjQuery
better-scroll 實現無縫輪播
2018-07-11
使用jQuery實現的平滑滾動輪播圖
2018-08-29
jQuery
css實現滾動輪播
2019-04-16
CSS
無縫輪播圖的一種方式原理
2019-02-16
js程式碼實現的圖片水平無縫滾動
2017-03-16
JS
原生javascript實現的水平圖片無縫滾動效果
2017-03-20
JavaScript
原生JS實現一個無縫輪播圖外掛(支援vue)
2018-06-19
JSVue
CSS實現迴圈無縫滾動
2018-11-04
CSS
原生javascript實現的圖片無縫滾動程式碼分析
2017-03-21
JavaScript
jQuery圖片無縫滾動效果
2018-05-18
jQuery
有間隙卡片縮放/無縫CollectionViewBanner無限輪播圖
2018-06-28
View
js無縫滾動
2021-09-09
JS
成品直播原始碼，輪播圖無縫切換以及自動懸停
2022-07-12
原始碼
jquery實現的垂直或者水平無縫滾動外掛
2017-03-22
jQuery
直播系統原始碼，vue實現無縫滾動
2023-11-23
原始碼Vue
JS圖片滾動（無縫、平滑、上下左右滾動）效果
2012-03-13
JS
ViewPage實現輪播圖
2018-10-29
View
Banner實現輪播圖
2018-10-29
js實現輪播圖
2021-01-02
JS
CSS 水平無縫滾動
2017-11-18
CSS
無縫迴圈滾動
2016-05-30
jQuery 間歇的無縫滾動
2019-01-22
jQuery
JavaScript圖片橫向無縫滾動詳解
2018-09-07
JavaScript
jQuery 圖片列表垂直間歇無縫滾動
2019-01-24
jQuery
H5移動端獲獎無縫滾動動畫實現
2018-06-21
H5動畫
js實現的單行文字不間斷無縫滾動效果
2017-04-17
JS
手動實現輪播圖（二）：迴圈滾動、定時切換與指示器
2018-04-21
原生js實現輪播圖
2020-10-25
JS
圖片輪播元件實現
2017-10-22
元件
js-字幕無縫滾動
2019-01-29
JS
JavaScript無縫滾動記錄
2021-03-26
JavaScript
CSS水平無縫滾動效果
2018-07-19
CSS
vue.js無縫滾動
2018-01-25
Vue.js
vue元件之輪播圖的實現
2019-03-21
Vue元件

邏輯難理解版本的輪播圖(實現無縫滾動)

banner.json

圖片自己搞

utils.js

animate.js

相關文章