封装swiper

1、轮播图插件的参数

使用方法

selector ： 表示要在哪个容器中创建轮播图
options : {  //配置对象
    autoplay : true/false,     自动播放bool
    interval : 1000,   设置滑动时间
    duration : 1000,   滑动间隔时间
    nav      : {
        nC   : "next",    设置next按钮的类型名
        pC   : "pre",     设置pre按钮的类型名
    },
    pgC  : {
        default : "",
        active : ""
    },      设置分页器的样式
}

封装轮播图css代码

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

.slider-wrap{
    /* 宽度先不设置,通过JS动态设置slider-wrap的宽度,根据用户插入的slider-item数量,动态计算 */
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
}
.slider-item{
    /* 宽度不设置,通过JS动态设置改容器宽度 */
    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) {

    //获取要创建区域的容器对象
    var el = document.querySelector(selector);
    //获取el范围内的sliderWrao对象
    var sliderWrap = el.querySelector('slider-wrap');
    //定义初始化的index
    sliderWrap.index = 0;
    //定义两个定时器
    sliderWrap.timer1 = sliderWrap.timer2 = null;
    //获取轮播元素的个数
    var length = sliderWrap.querySelectorAll('.slider-wrap').length;

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

    //拆解传递进来的options参数
    var isAuto = options.autoplay || false;  //自动播放判断
    //滑动时间
    var interval = options.interval || 500;
    //轮播间隔
    var duration = options.interval || 1000;
    //导航按钮的外部样式
    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、设置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标签
        //初始化sliderItem
        function sliderItem() {
            //获取第一个slider的内容
            var sCon1 = el.querySelector('.slider-item:first-child').innerHTML;
            //获取最后一个slider的内容
            var sCon2 = el.querySelector('.slider-item:last-child').innerHTML;

            //向sliderWrap 中添加两个标签
            sliderWrap.innerHTML += `<div class="slider-item last">${sCon1}</div>`
            //向sliderWrap 
            sliderWrap.innerHTML += `<div class="slider-item first">${sCon2}</div>`

            //获取新加入的标签
            var last = el.querySelector('.last');
            var first = el.querySelector('.first');
            //分别将两个新创建的前后定位
            last.style.right = -cW + "px";
            first.style.left = -cW + "px";
        }

        //4、给每个Item动态设置宽度
        var items = el.querySelectorAll('.slider-item');
        for (var i = 0; i < items.length; i++) {
            items[i].style.width = cW + "px";
        }

        //5、给nav导航添加为外部样式
        el.querySelector('.pre').className += `${pC}`;
        el.querySelector('.next').className += `${nC}`;

    }

    //给分页器按钮绑定点击事件
    function bindClickToItem() {
        var pagItems = el.querySelectorAll('.pagination span');  //获取所有的分页按钮
        //遍历绑定点击事件
        for (var i = 0; i < pagItems.length; i++) {

            pagItems[i].index = i;
            pagItems[i].onclick = sliderTo;  //绑定点击方法
        }
        pagItems[0].onclick();   //绑定完成后，先执行一下按钮一的绑定
    }
    //定义sliderTo方法来切换 容器位置
    function sliderTo() {

        clearInterval(sliderWrap.timer2); //停止自动播放
        //枷锁，点同一个按钮，防止点击多次
        if (sliderWrap.timer && sliderWrap.index == this.index) return;
        //防止点不同按钮时，定时器叠加
        clearInterval(sliderWrap.timer);

        //获取点击盒子的下标            或的表达式，是为了让导航按钮能够sliderTo方法
        sliderWrap.index = this.index == undefined ? sliderWrap.index : this.index;

        //开启动画滑动
        var b = sliderWrap.offsetLeft;
        var c = -sliderWrap.index * cW - b;   //目标   -下标 * 可视区域宽度
        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 定位到默认0 的状态
                    sliderWrap.index = 0;
                    sliderWrap.style.left = 0;

                }
                //左边界判断
                if (sliderWrap.index <= -1) {
                    //快速将sliderWrap 定位到默认-1 的状态
                    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;
        }

        //给当前的按键添加active类型名
        items[o].className = `${de ? de : ''} ${ac ? ac : 'active'}`;
    }

    //定义函数给 导航按钮绑定事件
    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，并传入对应的参数
    mySwiper('.banner', {
        autoplay: true,
        interval: 1000,
        duration: 1000,
        nav: {
            pC: "pp",
            nC: "nn"
        },
        pgC: "dd"
    })
</script>

</html>