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 相关文章推荐
关于javascript中的parseInt使用技巧
Sep 03 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
javascript实现图片轮播代码
Jul 09 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
element中的$confirm的使用
Apr 26 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 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 文件上传全攻略
2010/04/28 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
js获取域名的方法
2015/01/27 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Python实现多属性排序的方法
2018/12/05 Python
python实现代码统计程序
2019/09/19 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
python中线程和进程有何区别
2020/06/17 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
执行力心得体会
2013/12/31 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
个人授权委托书
2014/09/15 职场文书
思想道德自我评价2015
2015/03/09 职场文书
2015年新教师工作总结
2015/04/28 职场文书
高中生综合素质评价范文
2015/08/18 职场文书