封装一个属于自己的轮播图插件——左右切换版

上一篇文章 案例|原生手写一个轮播图——渐隐渐显版 还有很多不足,这里要非常感谢大佬 csdoker给出的宝贵意见和指导🙏,所以笔者决定重新完善一下轮播图的案例,打算做一个简易版的左右轮播图插件的封装;

一、插件封装前言(封装的基础)

思维导图

54.插件封装 - 图1

(一)、插件封装思想

1、敏捷化平台的构建思想

封装一款插件,首先第一件事情一定是分析,分析最后实现的效果和可以支持的配置项

2、依据:

  • => 经验积攒
  • => 研究别人优秀的插件😄

3、目的:

写插件的目的是方便后期的开发,而且需要让更多人使用(开源)

4、要求:

  • -> 专业,我们写的插件性能要好(代码要好)
  • -> 易用,别人使用起来非常的简便
  • -> 强大,尽可能在代码简洁的情况下,支持更强大的效果
  • -> 灵活,尽可能基于原生JS编写,不要依赖其他的类库或者内容(拿来即用主义)
  • -> 扩展,可升级,升级的时候要考虑到低版本的向后兼容,而且不要和原始的版本差距太大
  • ……等等

(二)、左右轮播图插件封装思想

插件 组件 类库 等这些东西封装 基本上都要基于面向对象思想

  • 面向对象的思想能够保证每一个实例之间没有关联
  • 面向对象的最主要目的就是:插件组件封装
  • 我们封装的插件是一个类

    • 基于插件每一次调用实现的轮播图 都是创建类的一个实例
  • 对于轮播图来说:

    • 1.基本核心信息应该都是私有的
    • 2.一些操作的方法应该是公用的

(三)、插件封装中的形参处理

方法一:设置为形参,一个个传递

  • 特点:

    • -> 传递实参的顺序必须和形参设置顺序保持一致
    • -> 不好给形参设置默认值
    • -> 中间的一些项如果不传递,会把后面传递的项错位
  • 使用场景:

    • 一般这种情况只应用于参数特别少的情况下(一般不超过两个)

方法二:基于对象键值对的方式处理

  • 特点:

    • -> 可以传递,也可以不传递
    • -> 传递的顺序也随意,因为都是基于属性名标记好的,只要属性和值对应,顺序是无所谓的
    • -> 方便扩展
    • -> 不传递的信息我们给其设置默认值
  • 使用场景:

    • 对于传递多个参数的情况下,我们一般基于对象键值对的方式处理

二、轮播图封装——HTML

这一部分我们可以写一点架子出来,用户使用时直接CV过来,更换自己的图片,配置自己的一些细节内容即可; 仓库地址

  1. <!-- 轮播图整体容器 -->
  2. <div class="xiaozhima-container">
  3. <!-- 所有图片容器 -->
  4. <div class="xiaozhima-wrapper">
  5. <!-- 每个图片容器 -->
  6. <div class="xiaozhima-slide">
  7. <!-- 插入您的图片 -->
  8. <img src=" " alt="">
  9. </div>
  10. <div class="xiaozhima-slide">
  11. <img src=" " alt="">
  12. </div>
  13. <div class="xiaozhima-slide">
  14. <img src=" " alt="">
  15. </div>
  16. <div class="xiaozhima-slide">
  17. <img src=" " alt="">
  18. </div>
  19. </div>
  20. <!-- 分页器容器 -->
  21. <div class="xiaozhima-pagination"></div>
  22. <!-- 左右按钮容器 -->
  23. <a href="javascript:;" class="xiaozhima-arrow-prev"></a>
  24. <a href="javascript:;" class="xiaozhima-arrow-next"></a>
  25. </div>
  26. 复制代码

三、轮播图封装——CSS

这一部分我们也是写一点架子出来,把我们需要实现的内容配置好,细节样式由用户自己指定即可

1、使用方式:

  • 引入命名为banner-plugin.css的样式表即可 ;仓库地址 (大家也可以自己创建一个CSS文件,把代码直接粘贴进去即可);

2、用户需要配置的内容:

  • 轮播图整体容器的:

    • width
    • height
  • 插入您的图片中的:(可不更改只传图片即可)

    • 图片及图片的样式

3、需要在JS中动态计算的样式

  • 所有图片容器的:

    • width :根据SLIDE的个数(含克隆的)* CONTAINER容器的宽度
    • transition:是在JS中设置的
    • left:初始展示哪一个SLIDE,LEFT值就应该是计算好的
  • 每个图片容器的:

    • width :需要和用户传递的CONTAINER的宽度保持一致(JS中处理)
  • 左右按钮:(北京图片转为BASE64编码)

    • 插件中的样式资源最好不要使用图片(因为这样需要用户额外的导入,不利于插件的推广和使用) => 需要使用图片,我们最好把图片设置为BASE64编码
    • 一个把图片转为BASE64编码的在线网站:tool.css-js.com/base64.html

4、具体的CSS代码

.xiaozhima-container {
    /* 
     * 需要用户后期自己配置的样式
     *   width
     *   height
     */
    position: relative;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}
.xiaozhima-container .xiaozhima-wrapper {
    /* 
     * 需要在JS中动态计算的样式
     *   width 根据SLIDE的个数(含克隆的)* CONTAINER容器的宽度
     *   transition 是在JS中设置的
     *   left 初始展示哪一个SLIDE,LEFT值就应该是计算好的
     */
    display: flex;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    height: 100%;
}
.xiaozhima-container .xiaozhima-wrapper .xiaozhima-slide {
    /*
     * 需要用户后期自己配置的样式
     *   width 和CONTAINER的宽度保持一致(JS中处理)
     */
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
}
.xiaozhima-container .xiaozhima-wrapper .xiaozhima-slide img {
    display: block;
    width: 100%;
    height: 100%;
}
.xiaozhima-container .xiaozhima-pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 999;
    transform: translateX(-50%);
    padding: 3px 6px;
    background: rgba(255, 255, 255, .3);
    font-size: 0;
    border-radius: 10px;
}
.xiaozhima-container .xiaozhima-pagination span {
    display: inline-block;
    margin: 0 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: lightblue;
    cursor: pointer;
}
.xiaozhima-container .xiaozhima-pagination span.active {
    background: lightcoral;
}
.xiaozhima-arrow-prev,
.xiaozhima-arrow-next {
    display: none;
    position: absolute;
    z-index: 999;
    top: 50%;
    margin-top: -22.5px;
    width: 30px;
    height: 45px;
    /* 插件中的样式资源最好不要使用图片(因为这样需要用户额外的导入,不利于插件的推广和使用) => 需要使用图片,我们最好把图片设置为BASE64编码 */
    background: url("data:image/png;base64,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") no-repeat 0 0;
}
.xiaozhima-arrow-prev {
    left: 0;
}
.xiaozhima-arrow-next {
    right: 0;
    background-position: -50px 0;
}
.xiaozhima-container:hover .xiaozhima-arrow-prev,
.xiaozhima-container:hover .xiaozhima-arrow-next {
    display: block;
}
复制代码

四、轮播图封装——JS(重点)

(一)、第一步——功能及配置项分析

1、目的:

  • 封装一个bannerPlugin方法,可以让指定的容器实现出左右运动版的轮播图效果;

2、使用语法:

  • bannerPligin([container],[options]) ;

3、参数说明:

  • container:容器标签
  • options:需要配置项(这里用户配置的参数较多,所以我们采用对象数据类型

参数 options 配置项详解

54.插件封装 - 图2

(二)、第二步——参数初始化

上面我们说过了参数的处理方式有两种,我们这里选择基于对象健值对的方式处理;

这里用到了我们昨天铺垫的深比较、循环迭代方法(深克隆 VS 浅克隆|深比较 VS 浅比较|回调函数),还有数据类型检测的方法,文章JS中数据类型检测四种方式的优缺点 的末尾提到过,我把他作为工具包先放在这里

1、工具包

仓库地址 大家也可以直接CV

/* 工具包 */
(function () {
    // 数据类型检测
    let class2type = {};
    ["Boolean", "Number", "String", "Function", "Array", "Date", "RegExp", "Object", "Error", "Symbol"].forEach(item => {
        class2type["[object " + item + "]"] = item.toLowerCase();
    });
    function toType(obj) {
        if (obj == null) return obj + "";
        return typeof obj === "object" || typeof obj === "function" ?
            class2type[class2type.toString.call(obj)] || "object" :
            typeof obj;
    }
    // 检测是否为函数
    function isFunction(obj) {
        return typeof obj === "function" && typeof obj.nodeType !== "number";
    }
    // 检测window
    function isWindow(obj) {
        return obj != null && obj === obj.window;
    }
    // 数组/类数组
    function isArrayLike(obj) {
        var length = !!obj && "length" in obj && obj.length,
            type = toType(obj);
        if (isFunction(obj) || isWindow(obj)) return false;
        return type === "array" || length === 0 || typeof length === "number" && length > 0 && (length - 1) in obj;
    }
    // 循环迭代
    function _each(obj, callback, context = window) {
        if (/^(ARRAY|OBJECT)$/i.test(obj.constructor)) {
            obj = _cloneDeep(obj);
        }
        if (isArrayLike(obj)) {
            for (let i = 0; i < obj.length; i++) {
                let res = callback && callback.call(context, obj[i], i);
                if (res === false) break;
                if (res !== undefined) obj[i] = res;
            }
        } else {
            for (let key in obj) {
                if (!obj.hasOwnProperty(key)) break;
                let res = callback && callback.call(context, obj[key], key);
                if (res === false) break;
                if (res !== undefined) obj[key] = res;
            }
        }
        return obj;
    }
    // 深克隆
    function _cloneDeep(obj) {
        if (obj === null) return null;
        if (typeof obj !== "object") return obj;
        if (obj instanceof RegExp) return new RegExp(obj);
        if (obj instanceof Date) return new Date(obj);
        let cloneObj = new obj.constructor;
        for (let key in obj) {
            if (!obj.hasOwnProperty(key)) break;
            cloneObj[key] = _cloneDeep(obj[key]);
        }
        return cloneObj;
    }
    // 深比较
    function _assignDeep(obj1, obj2) {
        let obj = _cloneDeep(obj1);
        for (let key in obj2) {
            if (!obj2.hasOwnProperty(key)) break;
            let v2 = obj2[key],
                v1 = obj[key];
            if ((v1 !== null && typeof v1 === "object") && (v2 !== null && typeof v2 === "object")) {
                obj[key] = _assignDeep(v1, v2);
                continue;
            }
            obj[key] = v2;
        }
        return obj;
    }
    ['_each', '_cloneDeep', '_assignDeep', 'toType', 'isFunction', 'isWindow', 'isArrayLike'].forEach(item => {
        window[item] = eval(item);
    });
})();
复制代码

2、参数初始化的目的

  • 配置默认的参数信息,当用户不传递对应参数时走默认信息
function bannerPlugin(container, options = {}) {
    // 参数初始化:默认配置信息
    let defaultParams = {
        initialSlide: 0,
        autoplay: 3000,
        speed: 300,
        pagination: {
            el: '.xiaozhima-pagination',
            clickable: true
        },
        navigation: {
            nextEl: '.xiaozhima-arrow-next',
            prevEl: '.xiaozhima-arrow-prev'
        },
        on: {
            init() {},
            transitionStart() {},
            transitionEnd() {}
        }
    };
    // 利用深比较,把用户传递进来的参数和默认配置合并(达到替换默认配置的效果)
    options = _assignDeep(defaultParams, options);
    // 判断用户传递进来的第一个参数是否为元素容器,支持直接传递标签
    typeof container === "string" ? container = document.querySelector(container) : null;
    if (!container || container.nodeType !== 1) {
        throw new TypeError('container must be an element!');
    }  
    return new Banner(container, options);
}
复制代码

(三)、第三步——配置每个轮播图的私有属性

1、利用类与实例的方式实现每个轮播图之间互不影响

  • 用户在使用时,每个配置信息肯定是当前轮播图私有的,所以我们配置好的默认参数,应该是每一个实例的私有属性
class Banner {
    constructor(container, options) {
        // 把传递进来的信息都挂载到当前类的实例上
        // 1.信息都作为他的私有属性(这样每一个实例之间互不影响)
        // 2.挂载到实例上,以后在当前类的其它方法中,只要保证THIS是实例,都可以基于THIS.XXX获取和操作
        _each(options, (item, key) => {
            this[key] = item;
        });
        this.container = container;
        this.activeIndex = this.initialSlide;
    }
}
复制代码

(四)、第四步——配置公共方法(重点)

  • 上面我们给每个轮播图实例都添加了私有属性,下面的公共方法才是重点内容

1、计算结构和样式函数

  • 每一个轮播图的完成,必要的操作都是获取元素
computed() {
    let {
        container,
        pagination,
        navigation
    } = this;
    // 轮播图
    this.wrapper = container.querySelector('.xiaozhima-wrapper');
    this.slidesTrue = container.querySelectorAll('.xiaozhima-slide');
    // 克隆第一张到容器的末尾
    this.wrapper.appendChild(this.slidesTrue[0].cloneNode(true));
    this.slides = container.querySelectorAll('.xiaozhima-slide');
    // 分页器
    this.paginationBox = null;
    this.paginationList = null;
    if (toType(pagination) === "object") {
        let el = pagination.el;
        if (el) {
            this.paginationBox = container.querySelector(el);
            // 创建SPAN
            let str = ``;
            _each(this.slidesTrue, item => {
                str += `<span></span>`;
            });
            this.paginationBox.innerHTML = str;
            this.paginationList = this.paginationBox.querySelectorAll('span');
        }
    }
    // 左右切换
    this.arrowPrev = null;
    this.arrowNext = null;
    if (toType(navigation) === "object") {
        navigation.prevEl ? this.arrowPrev = container.querySelector(navigation.prevEl) : null;
        navigation.nextEl ? this.arrowNext = container.querySelector(navigation.nextEl) : null;
    }
    // 控制元素的样式(包含初始展示哪一个)
    this.changeWidth = parseFloat(getComputedStyle(container).width);
    this.activeIndex = this.activeIndex < 0 ? 0 : (this.activeIndex > this.slides.length - 1 ? this.slides.length - 1 : this.activeIndex);
    this.wrapper.style.width = `${this.changeWidth*this.slides.length}px`;
    this.wrapper.style.transition = `left ${this.speed}ms`;
    this.wrapper.style.left = `${-this.activeIndex*this.changeWidth}px`;
    _each(this.slides, item => {
        item.style.width = `${this.changeWidth}px`;
    });
}
复制代码

2、实现轮播图切换函数

// 实现轮播图切换
change(now = false) {
    //now 传值是立即切换,不传是默认的有动画切换
    let {
        wrapper,
        speed,
        activeIndex,
        changeWidth,
        on
    } = this;
    let isO = toType(on) === "object" ? true : false,
        transitionStart = isO ? on.transitionStart : null,
        transitionEnd = isO ? on.transitionEnd : null;

    // 切换之前触发的钩子函数
    !now && transitionStart ? transitionStart.call(this, this) : null;
    // 如果传了now 立即切换,则不需要有动画
    wrapper.style.transitionDuration = `${now?0:speed}ms`;
    wrapper.style.left = `${-activeIndex*changeWidth}px`;
    if (now) {
        // 如果立即切换我需要让上面先渲染一次,利用读写分离;
        wrapper.offsetWidth;
    } 
    // 切换之后触发的钩子函数
    let fn = () => {
        !now && transitionEnd ? transitionEnd.call(this, this) : null;
        // 每一次都会重新监听,所以监听完需要把上一次监听的移除掉
        wrapper.removeEventListener('transitionend', fn);
    };
    wrapper.addEventListener('transitionend', fn);
}
复制代码

3、自动轮播函数

// 自动轮播
autoMove() {
    if (this.activeIndex === this.slides.length - 1) {
        this.activeIndex = 0;
        this.change(true);
    }
    this.activeIndex++;
    this.change();
}
复制代码

4、焦点对齐函数

// 实现焦点对齐
autoFocus() {
    let {
        paginationList,
        activeIndex,
        slides
    } = this;
    if (!paginationList) return;
    activeIndex === slides.length - 1 ? activeIndex = 0 : null;
    _each(paginationList, (item, index) => {
        if (index === activeIndex) {
            item.className = 'active';
            return;
        }
        item.className = '';
    });
}
复制代码

(五)、第五步——公共方法执行顺序及条件(重点)

  • 现在实现一个轮播图功能的方法,我们都已经封装完成,但方法是死的,只有执行才有价值,
  • 这个时候我们就要考虑到,我们虽然创建了这些方法,但是用户传递的参数中可能并不需要用到这些,所以我们还需要判断用户是否需要,如果用户需要,那我们的执行顺序又是什么;
init() {
    // THIS:当前类的实例
    // 入口,在这里控制代码执行的逻辑顺序

    // 先基于它获取元素后,才可以获取实例上的信息
    this.computed();
    let {
        autoplay,
        autoMove,
        container,
        pagination,
        paginationList,
        arrowNext,
        arrowPrev
    } = this;
    // 控制是否自动切换
    if (autoplay) {
        this.autoTimer = setInterval(autoMove.bind(this), autoplay);
        // 箭头函数中的THIS是上下文中的,也就是实例
        container.onmouseenter = () => clearInterval(this.autoTimer);
        container.onmouseleave = () => this.autoTimer = setInterval(autoMove.bind(this), autoplay);
    }
    // 控制焦点切换
    if (toType(pagination) === "object" && pagination.clickable === true && paginationList) {
        _each(paginationList, (item, index) => {
            item.onclick = () => {
                let {
                    activeIndex,
                    slides
                } = this;
                if ((index === activeIndex) || (index === 0 && activeIndex === slides.length - 1)) return;
                this.activeIndex = index;
                this.change();
            };
        });
    }
    // 控制左右按钮切换
    arrowNext ? arrowNext.onclick = autoMove.bind(this) : null;
    arrowPrev ? arrowPrev.onclick = () => {
        if (this.activeIndex === 0) {
            this.activeIndex = this.slides.length - 1;
            this.change(true);
        }
        this.activeIndex--;
        this.change();
    } : null;
    // 初始化完成,触发INIT回调函数
    if (toType(this.on) === "object" && isFunction(this.on.init)) {
        // 把回调函数执行,让方法中的THIS是实例,并且传递的第一个参数也是实例
        this.on.init.call(this, this);
    }
}
复制代码

(六)、第六步——整合优化(重点)

上面JS代码汇总整理

  • 使用方式JS倒入即可;仓库地址

    • 这里笔者没有放地址,同样需要您创建一个banner-plugin.js的JS文件,把代码直接粘贴进去即可;
(function () {
    class Banner {
        constructor(container, options) {
            // 把传递进来的信息都挂载到当前类的实例上
            // 1.信息都作为他的私有属性(这样每一个实例之间互不影响)
            // 2.挂载到实例上,以后在当前类的其它方法中,只要保证THIS是实例,都可以基于THIS.XXX获取和操作
            _each(options, (item, key) => {
                this[key] = item;
            });
            this.container = container;
            this.activeIndex = this.initialSlide;
            this.init();
        }
        init() {
            // THIS:当前类的实例
            // 入口,在这里控制代码执行的逻辑顺序
            // 先基于它获取元素后,才可以获取实例上的信息
            this.computed();
            let {
                autoplay,
                autoMove,
                container,
                pagination,
                paginationList,
                arrowNext,
                arrowPrev
            } = this;
            // 控制是否自动切换
            if (autoplay) {
                this.autoTimer = setInterval(autoMove.bind(this), autoplay);
                // 箭头函数中的THIS是上下文中的,也就是实例
                container.onmouseenter = () => clearInterval(this.autoTimer);
                container.onmouseleave = () => this.autoTimer = setInterval(autoMove.bind(this), autoplay);
            }
            // 控制焦点切换
            if (toType(pagination) === "object" && pagination.clickable === true && paginationList) {
                _each(paginationList, (item, index) => {
                    item.onclick = () => {
                        let {
                            activeIndex,
                            slides
                        } = this;
                        if ((index === activeIndex) || (index === 0 && activeIndex === slides.length - 1)) return;
                        this.activeIndex = index;
                        this.change();
                    };
                });
            }
            // 控制左右按钮切换
            arrowNext ? arrowNext.onclick = autoMove.bind(this) : null;
            arrowPrev ? arrowPrev.onclick = () => {
                if (this.activeIndex === 0) {
                    this.activeIndex = this.slides.length - 1;
                    this.change(true);
                }
                this.activeIndex--;
                this.change();
            } : null;
            // 初始化完成,触发INIT回调函数
            if (toType(this.on) === "object" && isFunction(this.on.init)) {
                // 把回调函数执行,让方法中的THIS是实例,并且传递的第一个参数也是实例
                this.on.init.call(this, this);
            }
        }
        // 计算结构和样式
        computed() {
            let {
                container,
                pagination,
                navigation
            } = this;
            // 轮播图
            this.wrapper = container.querySelector('.xiaozhima-wrapper');
            this.slidesTrue = container.querySelectorAll('.xiaozhima-slide');
            // 克隆第一张到容器的末尾
            this.wrapper.appendChild(this.slidesTrue[0].cloneNode(true));
            this.slides = container.querySelectorAll('.xiaozhima-slide');
            // 分页器
            this.paginationBox = null;
            this.paginationList = null;
            if (toType(pagination) === "object") {
                let el = pagination.el;
                if (el) {
                    this.paginationBox = container.querySelector(el);
                    // 创建SPAN
                    let str = ``;
                    _each(this.slidesTrue, item => {
                        str += `<span></span>`;
                    });
                    this.paginationBox.innerHTML = str;
                    this.paginationList = this.paginationBox.querySelectorAll('span');
                }
            }
            // 左右切换
            this.arrowPrev = null;
            this.arrowNext = null;
            if (toType(navigation) === "object") {
                navigation.prevEl ? this.arrowPrev = container.querySelector(navigation.prevEl) : null;
                navigation.nextEl ? this.arrowNext = container.querySelector(navigation.nextEl) : null;
            }
            // 控制元素的样式(包含初始展示哪一个)
            this.changeWidth = parseFloat(getComputedStyle(container).width);
            this.activeIndex = this.activeIndex < 0 ? 0 : (this.activeIndex > this.slides.length - 1 ? this.slides.length - 1 : this.activeIndex);
            this.wrapper.style.width = `${this.changeWidth * this.slides.length}px`;
            this.wrapper.style.transition = `left ${this.speed}ms`;
            this.wrapper.style.left = `${-this.activeIndex * this.changeWidth}px`;
            _each(this.slides, item => {
                item.style.width = `${this.changeWidth}px`;
            });
            this.autoFocus();
        }
        // 自动轮播
        autoMove() {
            if (this.activeIndex === this.slides.length - 1) {
                this.activeIndex = 0;
                this.change(true);
            }
            this.activeIndex++;
            this.change();
        }
        // 实现轮播图切换
        change(now = false) {
            //now 传值是立即切换,不传是有动画切换
            let {
                wrapper,
                speed,
                activeIndex,
                changeWidth,
                on
            } = this;
            let isO = toType(on) === "object" ? true : false,
                transitionStart = isO ? on.transitionStart : null,
                transitionEnd = isO ? on.transitionEnd : null;
            // 切换之前触发的钩子函数
            !now && transitionStart ? transitionStart.call(this, this) : null;
            // 如果传了now 立即切换,则不需要有动画
            wrapper.style.transitionDuration = `${now ? 0 : speed}ms`;
            wrapper.style.left = `${-activeIndex * changeWidth}px`;
            if (now) {
                // 如果立即切换我需要让上面先渲染一次,利用读写分离;
                wrapper.offsetWidth;
            } else {
                this.autoFocus();
            }
            // 切换之后触发的钩子函数
            let fn = () => {
                !now && transitionEnd ? transitionEnd.call(this, this) : null;
                // 每一次都会重新监听,所以监听完需要把上一次监听的移除掉
                wrapper.removeEventListener('transitionend', fn);
            };
            wrapper.addEventListener('transitionend', fn);
        }
        // 实现焦点对齐
        autoFocus() {
            let {
                paginationList,
                activeIndex,
                slides
            } = this;
            if (!paginationList) return;
            activeIndex === slides.length - 1 ? activeIndex = 0 : null;
            _each(paginationList, (item, index) => {
                if (index === activeIndex) {
                    item.className = 'active';
                    return;
                }
                item.className = '';
            });
        }
    }
    function bannerPlugin(container, options = {}) {
        let defaultParams = {
            initialSlide: 0,
            autoplay: 3000,
            speed: 300,
            pagination: {
                el: '.xiaozhima-pagination',
                clickable: true
            },
            navigation: {
                nextEl: '.xiaozhima-arrow-next',
                prevEl: '.xiaozhima-arrow-prev'
            },
            on: {
                init() { },
                transitionStart() { },
                transitionEnd() { }
            }
        };
        options = _assignDeep(defaultParams, options);
        typeof container === "string" ? container = document.querySelector(container) : null;
        if (!container || container.nodeType !== 1) {
            throw new TypeError('container must be an element!');
        }
        return new Banner(container, options);
    }
    window.bannerPlugin = bannerPlugin;
})();
复制代码

五、使用须知

  • 必须设置的样式

    • 大容器的宽高
    • 您自己的图片
  • JS的使用语法

    • bannerPlugin(大容器,用户需求的参数信息)
      • container:容器标签
      • options:需要配置项
        • 参数信息详见 参数信息说明

54.插件封装 - 图3

笔者也在前端这条路上不断的学习和尝试,文中内容有不对的地方,还请赐教,不胜感激🙏;

笔者想在掘金不断成长,现阶段目标升到3级,还望大家成全😄,不胜感激;