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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
ajax 文件上传应用简单实现
Mar 03 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
js命名空间写法示例
Dec 18 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
原生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
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python模块之re正则表达式详解
2017/02/03 Python
python实现俄罗斯方块游戏
2020/03/25 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python的UTC时间转换讲解
2019/02/26 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Django logging配置及使用详解
2019/07/23 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
小学教学随笔感言
2014/02/26 职场文书
导游词400字
2015/02/13 职场文书
五一放假通知怎么写
2015/08/18 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
浅析python中特殊文件和特殊函数
2022/02/24 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python