js实现无缝轮播图插件封装


Posted in Javascript onJuly 31, 2020

前言:页面中轮播图,对于一个前端开发者来说,是最基本的技能,不论是的商城网站,还是企业站,轮播图已经成为不可缺少的一个模块,而常见的轮播图不外乎两种,一种是渐隐渐现轮播图,一种是无缝轮播图。网上关于轮播图的件也有很多,但是用人家的代码总会出现各种各样的bug,我们修改bug往往要耗费很多时间,而且有些插件的效果还不符合我们的需求,那么我们该如何封装一个自己的轮播插件呢?这就是我们今天的任务,封装轮播插件。

1、特效离不开合理的页面布局,所以我们首先需要进行页面布局:

HTML代码:

<div class="container mycontainer">
 <div class="wrapper">
 <div class="slide">
  <img src="image/jd01.jpg" alt="">
 </div>
 <div class="slide">
  <img src="image/jd02.jpg" alt="">
 </div>
 <div class="slide">
  <img src="image/jd03.jpg" alt="">
 </div>
 <div class="slide">
  <img src="image/jd04.jpg" alt="">
 </div>
 </div>
 <!-- 分页器 -->
 <ul class="pagination"></ul>
 <!-- 导航按钮 -->
 <div class="button-pre"></div>
 <div class="button-next"></div>
</div>

2、在HTML页面中引入css样式文件:css样式文件代码如下:

CSS代码:

* {
 margin: 0;
 padding: 0;
}

ul,
li {
 list-style: none;
}

.container { 
 margin: 200px auto;
 position: relative;
 overflow: hidden;
}

.slide {
 float: left;
}

img {
 display: block;
}

.pagination {
 width: 160px;
 position: absolute;
 bottom: 30px;
 margin-left: -80px;
 left: 50%;
}

.pagination li {
 float: left;
 width: 20px;
 height: 20px;
 background-color: blue;
 margin: 0 10px;
 border-radius: 50%;
}

.button-pre,
.button-next {
 width: 22px;
 height: 40px;
 position: absolute;
 top: 50%;
 margin-top: -20px;
}

.button-pre {
 left: 30px;
 background: url('../image/left.png') no-repeat center center;
}

.button-next {
 right: 30px;
 background: url('../image/right.png') no-repeat center center;
}

.pagination .active {
 background-color: red;
}
.mycontainer{
 width: 590px;
 height: 470px;
}

页面布局完成后,接下来就是javaScript代码,绑定事件;

在绑定事件之前,我们首先要知道无缝轮播图的原理和一些技术关键点。
轮播图的原理:最外层视野区域固定大小且的溢出隐藏,通过动态控制包裹图片的父元素的marginLeft值实现轮播;
关键点1:最外层的盒子container固定大小,是我们的视野区域,需要设置溢出隐藏overflow:hidden;
关键点2:所有轮播的图片使用一个共同的父元素wrapper包裹起来;
关键点3:动态克隆第一张图片所在的元素silde,然后添加到最后;
关键点4:父元素wrapper的宽度为图片个数(原始图片个数+1,因为克隆多添加了一张图片)乘以单独一张图片的宽度;
关键点5:实现无缝轮播的判断条件,marginleft样式重置时机;
关键点6:动态生成分页器按钮,并设置分页器pagination样式;
关键点7:实现自动播放和清除播放,使用计时器setInterval()和 clearInterval()
关键点8:实现代码复用,借助面向对象的开发——构造函数+原型对象+jQuery插件封装机制实现

3、关键点梳理完之后,就可以开始javascript代码:通过自执行函数实现;需要在HTML页面引入JS文件,JS文件代码如下:

JS代码:

;(function($){
 // 默认设置
 var defaults = {
 speed:1000,
 interval:2000
 }
 function Banner(ele,options){
 // 获取元素对象
 this.element = $(ele);
 // 合并设置项
 this.options = $.extend({},defaults,options);
 // 获取包裹图片的父元素
 this.wrapper = this.element.children().first();
 // 获取要克隆的元素
 this.firstChild = this.wrapper.find('.slide:first');
 // 获取一张图片宽度
 this.Width = this.firstChild.width();
 // 记录图片下标
 this.n = 0;
 // 获取图片个数
 this.len = this.wrapper.find('.slide').length;
 // 获取切换导航按钮
 this.prev = this.element.find('.button-pre');
 this.next = this.element.find('.button-next');
 // 获取分页器
 this.pagination = this.element.find('.pagination');
 // 计时器
 this.timer = null;
 }
 // 初始化
 Banner.prototype.init = function(){
 var self = this; 
 (function () {
  // 克隆第一张图片并添加到元素的最后边,设置包裹图片父盒子的宽度
  self.wrapper.append(self.firstChild.clone(true));
  self.wrapper.css({ width:self.Width * (self.len + 1)});
  // 生成对应的分页器按钮
  for(var i = 0; i < self.len; i++){
  $('<li></li>').appendTo(self.pagination); 
  }
  // 动态设置分页器的样式
  self.pagination.find('li:first').addClass('active');
  var btnWidth = self.pagination.find('li:first').outerWidth(true) * self.len;
  self.pagination.css({width:btnWidth,marginLeft:-btnWidth / 2})
 })() 
 // 调用所有绑定的事件
 this.nextClick(); 
 this.preClick(); 
 this.btnClick();
 this.autoPlay();
 this.clearPlay(this.element);
 }
 // 切换下一张图片事件
 Banner.prototype.nextClick = function(){
 var self = this;
 this.next.click(function(){
  self.moveNext();
 })
 }
 // 切换图片,同时也为实现自动播放
 Banner.prototype.moveNext = function() {
 this.n++;
 // 判断重置时机和重置样式
 if (this.n > this.len ) {
  this.n = 1;
  this.wrapper.css({ marginLeft: 0 });
 }
 this.changeBtn(this.n > 3 ? 0 : this.n);
 this.wrapper.stop(true,true).animate({ marginLeft: -this.Width * this.n }, this.options.speed)
 }

 // 点击切换上一张图片
 Banner.prototype.preClick = function(){
 var self = this;
 this.prev.click(function () {
  self.n--;
  if (self.n < 0) {
  self.n = self.len - 1;
  self.wrapper.css({ marginLeft: -(self.len) * self.Width });
  }
  self.changeBtn(self.n < 0 ? self.n = 3 : self.n);
  self.wrapper.animate({ marginLeft: -self.Width * self.n }, self.options.speed)
 })
 }
 // 点击分页器切换图片
 Banner.prototype.btnClick = function(){
 var self = this;  
  this.pagination.find('li').click(function () {
  var index = $(this).index();
  self.n = index;
  self.changeBtn(index);
  self.wrapper.animate({ marginLeft: -self.Width * index }, self.options.speed)
 })
 }
 // 动态修改分页器按钮的样式
 Banner.prototype.changeBtn = function(index){
 this.pagination.find('li').eq(index).addClass('active').siblings().removeClass('active');
 }
 // 自动轮播
 Banner.prototype.autoPlay = function(){
 var self = this;
 /* 计时器中调用函数是,函数中的this 指向 window, 所以需要使用self.timer = setInterval(function(){
  self.moveNext();
  },2000);
  不能直接使用 self.timer = setInterval(self.moveNext(),2000); 形式 */
 self.timer = setInterval(function(){
  self.moveNext();
 },self.options.interval);
 }
 // 清除自动播放
 Banner.prototype.clearPlay = function(ele){
 var self = this;
 ele.mouseenter(function(){
  clearInterval(self.timer)
 }).mouseleave(function(){
  // 再次开启自动轮播
  self.timer = setInterval(function(){
  self.moveNext();
  },self.options.interval);
 })
 }
 // jQuery插件实现
$.fn.myBanner = function(params){
 // params 是自定义的配置项
 var banner = new Banner(this,params);
 banner.init();
 // 如果需要链式调用
 return this;
 }
})(jQuery)

最后在HTML页面中进行初始化,最好放到HTML结束标签之前的位置,因为我们封装的插件是依赖于jQuery的,因此首先引入jQuery文件,然后在引入我们自己封装的js文件;最后就是进行初始化设置:

<script>
 $(function(){
  $('.mycontainer').myBanner({
  // speed:图片切换速度
  // interval:图片切换的时间间隔
  speed:500,
  interval:3000
  });
 })
 

</script>

到此为止,我们已经实现了轮播插件的封装并且实现了复用,只需要动态的绑定不同的元素mycontainer(可以动态修改成自己的元素名字)即可实现复用。

4、如果需要修改容器的大小和图片的大小,可以直接覆盖样式即可:

.mycontainer2{
 width: 300px;
 height:200px;
}
.mycontainer2 img{
 width: 300px;
 height:200px;
}

5、完成。恭喜你,你的轮播插件可以正常切换了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
原生js滑动轮播封装
Jul 31 #Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 #Javascript
jquery轮播图插件使用方法详解
Jul 31 #jQuery
在Uni中使用Vue的EventBus总线机制操作
Jul 31 #Javascript
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
Vue之封装公用变量以及实现方式
Jul 31 #Javascript
three.js 将图片马赛克化的示例代码
Jul 31 #Javascript
You might like
php var_export与var_dump 输出的不同
2013/08/09 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
JavaScript创建对象的写法
2013/08/29 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
Python 初始化多维数组代码
2008/09/06 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
解读Python中degrees()方法的使用
2015/05/18 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python多线程之事件Event的使用详解
2018/04/27 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
保险内勤岗位职责
2014/04/05 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
初中中等生评语
2014/12/29 职场文书
团员个人年度总结
2015/02/26 职场文书
2016教师节问候语
2015/11/10 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android