案例——封装一个轮播图插件

说起插件，可能很多人搞不清楚插件和类库、组件、框架的区别，在这里，我先来简单的聊一聊它们之间的区别和联系

类库

提供一些真实项目中常用的方法，任何项目都可以把类库导入进来，调取里面的方法实现自己需要的业务逻辑，常见的有jQuery、ZEPTO

插件

具备一定的业务功能，例如：我们可以封装轮播图插件、选项卡插件、模态框插件等（插件规定了当前这个功能的样式结构，把实现功能的JS进行封装，以后想实现这个功能直接导入插件即可）常见的有swiper / iscroll / jquery-dialog / jquery-datepicker / ECharts

组件

把结构和、CSS、JS全部都封装好了，我们想实现一个功能直接导入进来即可（偶尔需要我们修改）常见的有bootstrap等

框架

具备一定的编程思想，要求我们按照框架的思想开发，一般框架中提供了常用的类库方法，提供了强大对的功能插件，有的也提供了强大的UI组件，常见的有React (React native)/ Vue / Augular

今天，我们的任务就是封装一个轮播图插件，之前我们已经用原生JS实现了轮播图功能，那么如何将其封装为一个插件呢？

源码下载地址：轮播图+轮播图插件的实现.zip

首先来看一下效果

第一步，我们需要设置配置项（要尽可能多的支持配置项，让用户有更多选择）我设计的只是支持了一点点

                let {ele,url,isArrow = true,isFocus = true,isAuto = true,defaultIndex = 0,interval = 3000,speed = 200,moveEnd} = options;

第二步，将所有配置项和需要用到的元素挂载到实例上，方便调取使用

               this.ele = ele;this.url = url;this.isArrow = isArrow;this.isFocus = isFocus;this.isAuto = isAuto;this.defaultIndex = defaultIndex;this.interval = interval;this.speed = speed;this.moveEnd = moveEnd;this.container = document.querySelector(ele);this.wrapper = null;this.focus = null;this.arrowLeft = null;this.arrowRight = null;this.slideList = null;this.focusList = null;this.stepIndex = 0; //记录当前展示快的索引this.autoTimer = null; //自动轮播的定时器

第三步，提供Banner的主入口init，在init中规划方法的执行顺序

init() {let promise = this.queryData();promise.then(() => {this.bindHTML();}).then(() => {if (this.isAuto) {//这里的this是window，我们需要让其为当前实例(用call改变this指向，或者用箭头函数让其上下文的this)// this.autoTimer = setInterval(this.autoMove, this.interval);this.autoTimer = setInterval(() => {this.autoMove();}, this.interval);}}).then(() => {this.handleContainer();if (this.isFocus) {this.handleFocus();}if (this.isArrow) {this.handleArrow();}})}

第四步，实现数据获取，数据绑定，自动轮播，焦点图片切换，点击按钮图片切换等方法;具体参考我之前一次写的原生JS实现轮播图案例
第五步将Banner插件扩展到window上

    window.Banner = Banner;

第六步，调取使用

    <section class="container" id="container3"></section><section class="container" id="container"></section><section class="container" id="container2"></section><script src="js/utils.js"></script><script src="js/animate.js"></script><!-- <script src="js/banner.js"></script> --><script src="js/banner-plugin.js"></script><script>new Banner({ele: '#container',url: 'json/banner.json',isArrow: false});new Banner({ele: '#container2',url: 'json/banner2.json',interval: 500,speed: 300,isFocus: false});new Banner({ele: '#container3',url: 'json/banner.json',interval: 2000,speed: 1000,})

案例——封装一个轮播图插件相关推荐

vue小项目总结与笔记【五】——一个轮播图插件vue-awesome-swiper
本次使用github上的一个开源插件,使用的是2.6.7稳定版本.安装指定版本的方法:在插件名后面加@版本号 ,即可 npm install vue-awesome-swiper@2.6.7 --sa ...
轮播图插件（swiper）
今天给新手介绍一个轮播图插件--swiper 首先要引用swiper.min.css和swiper.min.js. 页面代码 <div class="swiper-container& ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
常用插件的封装（轮播图、选项卡、楼梯导航及、拖拽）
PC端轮播图 1. 第一种轮播图(自动慢慢滑动,多用于展示) HTML部分: <div id="box"> <ul id="banner"&g ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
一个功能较全的轮播图插件（含详细介绍）
今天给大家分享一个功能较全的轮播图插件,废话不多说,直接上插件 ;(function($){"use strict";$.fn.extend({banner:function(op ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
get几个小技能：轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...
基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧使用需要准备(往下滑动会看到): ...

案例——封装一个轮播图插件

案例——封装一个轮播图插件相关推荐

最新文章

热门文章