1、輪播圖插件的參數(shù)

使用方法

selector ： 表示要在哪個容器中創(chuàng)建輪播圖
options : {  //配置對象
    autoplay : true/false,     自動播放bool
    interval : 1000,   設(shè)置滑動時間
    duration : 1000,   滑動間隔時間
    nav      : {
        nC   : "next",    設(shè)置next按鈕的類型名
        pC   : "pre",     設(shè)置pre按鈕的類型名
    },
    pgC  : {
        default : "",
        active : ""
    },      設(shè)置分頁器的樣式
}

封裝輪播圖css代碼

.swiper-container{
    position: relative;
    overflow: hidden;
}

.slider-wrap{
    /* 寬度先不設(shè)置,通過JS動態(tài)設(shè)置slider-wrap的寬度,根據(jù)用戶插入的slider-item數(shù)量,動態(tài)計(jì)算 */
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
}
.slider-item{
    /* 寬度不設(shè)置,通過JS動態(tài)設(shè)置改容器寬度 */
    background-color: #d0d0d0;
    font-size: 200px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-weight: bold;
    border: 1px solid #333;
    box-sizing: border-box;
}
.nav{
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    line-height: 50px;
    margin: auto;
    font-size: 80px;
    z-index: 50;
    display: flex;
    top: 0;
    bottom: 0;
    justify-content:space-between;
}

.next, .pre{cursor: pointer;}
.next:hover , .pre:hover{
            background-color: #f0f0f0;
}

.pagination{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 5px 0;
    z-index: 100;
}

.pagination span{
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #333;
    margin: 0 10px;
    display:inline-block;
    cursor: pointer;
}
.active{
    background-color: #007aff !important;
    color: #fff;
}
.swiper-container .last,  .swiper-container  .first{
    position: absolute;
    top: 0;
}

封裝輪播圖js代碼

function mySwiper(selector, options) {

    //獲取要創(chuàng)建區(qū)域的容器對象
    var el = document.querySelector(selector);
    //獲取el范圍內(nèi)的sliderWrao對象
    var sliderWrap = el.querySelector('slider-wrap');
    //定義初始化的index
    sliderWrap.index = 0;
    //定義兩個定時器
    sliderWrap.timer1 = sliderWrap.timer2 = null;
    //獲取輪播元素的個數(shù)
    var length = sliderWrap.querySelectorAll('.slider-wrap').length;

    //獲取容器的寬度
    var cW = el.querySelector('.swiper-container');

    //拆解傳遞進(jìn)來的options參數(shù)
    var isAuto = options.autoplay || false;  //自動播放判斷
    //滑動時間
    var interval = options.interval || 500;
    //輪播間隔
    var duration = options.interval || 1000;
    //導(dǎo)航按鈕的外部樣式
    var nC = options.nav && options.nav.nC;
    var pC = options.nav && options.nav.pC;

    //分頁器類型名
    var de = options.pgC && options.defualt;
    var ac = options.pgC && options.active;

    //引入tween
    // JavaScript Document
    var Tween = {//對象
        Linear: function (t, b, c, d) { return c * t / d + 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;
            }
        },
        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;
                if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
                else var 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;
                if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
                else var 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);
                if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
                else var 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;
            }
        },
        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;
            }
        },
        Bounce: {
            easeIn: function (t, b, c, d) {
                return c - Tween.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 Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
                else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
            }
        }
    }


    //初始化界面
    function initView() {
        //1浅乔、設(shè)置sliderWrap的寬度
        sliderWrap.style.width = length * cW + "px";
        //2、生成pagItem
        var sCon = '';
        for (var i = 0; i < length; i++) {
            sCon += `<span class="${de ? de : ''}"></span>`
        }
        el.querySelector(".pagination").innerHTML = sCon;
        //3咽弦、生成給前后添加一個item標(biāo)簽
        //初始化sliderItem
        function sliderItem() {
            //獲取第一個slider的內(nèi)容
            var sCon1 = el.querySelector('.slider-item:first-child').innerHTML;
            //獲取最后一個slider的內(nèi)容
            var sCon2 = el.querySelector('.slider-item:last-child').innerHTML;

            //向sliderWrap 中添加兩個標(biāo)簽
            sliderWrap.innerHTML += `<div class="slider-item last">${sCon1}</div>`
            //向sliderWrap 
            sliderWrap.innerHTML += `<div class="slider-item first">${sCon2}</div>`

            //獲取新加入的標(biāo)簽
            var last = el.querySelector('.last');
            var first = el.querySelector('.first');
            //分別將兩個新創(chuàng)建的前后定位
            last.style.right = -cW + "px";
            first.style.left = -cW + "px";
        }

        //4嚎于、給每個Item動態(tài)設(shè)置寬度
        var items = el.querySelectorAll('.slider-item');
        for (var i = 0; i < items.length; i++) {
            items[i].style.width = cW + "px";
        }

        //5泵额、給nav導(dǎo)航添加為外部樣式
        el.querySelector('.pre').className += `${pC}`;
        el.querySelector('.next').className += `${nC}`;

    }

    //給分頁器按鈕綁定點(diǎn)擊事件
    function bindClickToItem() {
        var pagItems = el.querySelectorAll('.pagination span');  //獲取所有的分頁按鈕
        //遍歷綁定點(diǎn)擊事件
        for (var i = 0; i < pagItems.length; i++) {

            pagItems[i].index = i;
            pagItems[i].onclick = sliderTo;  //綁定點(diǎn)擊方法
        }
        pagItems[0].onclick();   //綁定完成后，先執(zhí)行一下按鈕一的綁定
    }
    //定義sliderTo方法來切換 容器位置
    function sliderTo() {

        clearInterval(sliderWrap.timer2); //停止自動播放
        //枷鎖，點(diǎn)同一個按鈕躁愿，防止點(diǎn)擊多次
        if (sliderWrap.timer && sliderWrap.index == this.index) return;
        //防止點(diǎn)不同按鈕時叛本，定時器疊加
        clearInterval(sliderWrap.timer);

        //獲取點(diǎn)擊盒子的下標(biāo)            或的表達(dá)式，是為了讓導(dǎo)航按鈕能夠sliderTo方法
        sliderWrap.index = this.index == undefined ? sliderWrap.index : this.index;

        //開啟動畫滑動
        var b = sliderWrap.offsetLeft;
        var c = -sliderWrap.index * cW - b;   //目標(biāo)   -下標(biāo) * 可視區(qū)域?qū)挾?        var t = 0;
        //外部決定
        var d = Math.floor(interval / 10);

        sliderWrap.timer = setInterval(function () {
            t++;
            sliderWrap.style.left = Tween.Quad.easeOut(t, b, c, d) + "px";

            if (t >= d) {

                clearInterval(sliderWrap.timer);
                sliderWrap.timer = null;  //解鎖
                // alert(sliderWrap.index);
                //右邊界判斷
                if (sliderWrap.index >= length) {
                    //快速將sliderWrap 定位到默認(rèn)0 的狀態(tài)
                    sliderWrap.index = 0;
                    sliderWrap.style.left = 0;

                }
                //左邊界判斷
                if (sliderWrap.index <= -1) {
                    //快速將sliderWrap 定位到默認(rèn)-1 的狀態(tài)
                    sliderWrap.index = length - 1;  //定位到最后一張圖位置
                    sliderWrap.style.left = -(length - 1) * cW + "px";

                }
                autoplay && autoplay();   //重新啟動

            }
        }, 10)

        //更改按鈕樣式
        changePagItemStyle();

    }
    //更改按鈕樣式
    function changePagItemStyle() {
        var items = el.querySelectorAll('.pagination span');
        //遍歷清空類型名
        for (var i = 0; i < items.length; i++) {
            items[i].className = `${de ? de : ''}`
        }

        //樣式的邊界判斷
        var o = sliderWrap.index
        if (sliderWrap.index >= length) {
            o = 0;
        } else if (sliderWrap.index <= -1) {
            o = length - 1;
        }

        //給當(dāng)前的按鍵添加active類型名
        items[o].className = `${de ? de : ''} ${ac ? ac : 'active'}`;
    }

    //定義函數(shù)給 導(dǎo)航按鈕綁定事件
    function bingClickToNav() {
        var next = el.querySelector('.next');
        var pre = el.querySelector('.pre');


        next.onclick = function () {
            sliderWrap.index++;
            //邊界判斷彤钟，如果超出右邊界就 return
            if (sliderWrap.index > length) return;
            // if(sliderWrap.index == length) sliderWrap.index = 0
            sliderTo();
        }
        pre.onclick = function () {
            sliderWrap.index--;
            //邊界判斷来候，如果超出左邊界就 return
            if (sliderWrap.index < -1) return;
            // if(sliderWrap.index == -1) sliderWrap.index = length - 1;
            sliderTo();

        }
    }


    //自動播放
    var autoplay = null;
    if (isAuto) {
        autoplay = function () {
            clearInterval(sliderWrap.timer2)
            sliderWrap.timer2 = setInterval(function () {
                var next = el.querySelector('.next');
                next.onclick();
            }, duration)
        }
    }

    initView();
    bindClickToItem();
    bingClickToNav();
    autoplay && autoplay();
}

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./myswiper/myswiper.css">
    <style>
        .banner {
            width: 500px;
            /* height: 300px; */
            border: 1px solid red;
            margin: 100px auto;
        }
    </style>
</head>

<body>
//輪播圖的容器
    <div class="banner">
        <div class="swiper-container">
            <!-- 滑動容器 -->
            <div class="slider-wrap">
                <div class="slider-item">0</div>
                <div class="slider-item">1</div>
                <div class="slider-item">2</div>
            </div>
            <!-- nav -->
            <div class="nav">
                <div class="pre">&lt;</div>
                <div class="next">&gt;</div>
            </div>
            <!-- 分頁 -->
            <div class="pagination"></div>
        </div>
    </div>
  
</body>
<script src="./myswiper/myswiper.js"></script>
<script>

//使用mySwiper，并傳入對應(yīng)的參數(shù)
    mySwiper('.banner', {
        autoplay: true,
        interval: 1000,
        duration: 1000,
        nav: {
            pC: "pp",
            nC: "nn"
        },
        pgC: "dd"
    })
</script>

</html>