jQuery图片轮播实现并封装(一)


Posted in Javascript onDecember 03, 2016

利用面向对象自己动手写了一个封装好的jquery轮播对象,可满足一般需求,需要使用时只需调用此对象的轮播方法即可。

demo:https://github.com/zsqosos/shopweb

具体代码如下:

HTML结构:

<div class="banner" id="J_bg_ban">
<ul>


<li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li>


<li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li>


<li><a href="#"><img src="banner_03.jpg" alt="广告图"/></a></li>


<li><a href="#"><img src="banner_04.jpg" alt="广告图"/></a></li>


<li><a href="#"><img src="banner_05.jpg" alt="广告图"/></a></li>

</ul>

<div class="indicator" id="J_bg_indicator">

</div>

<div class="ban-btn clearfloat" id="J_bg_btn">


<a class="next-btn fr" href="javascript:">></a><a class="prev-btn fl" href="javascript:"><</a>

</div>
</div>

 css样式:

.banner {
 height: 325px;
 width: 812px;
 position: relative;
 overflow: hidden;
}
.banner ul li{
 position: absolute;
top: 0;

left: 0;
}
.banner ul li img{
 height: 325px;
 width: 812px;
 display: block;
}
.ban-btn{
 width: 100%;
 position: absolute;
 top: 136px;
 z-index: 2;
}
.ban-btn a{
 display: inline-block;
 height: 60px;
 width: 35px;
 background: rgba(180,180,180,0.5);
 font-size: 25px;
 text-align: center;
 line-height: 60px;
 color: #fff;
}
.ban-btn a:hover{
 background: rgba(100,100,100,0.5);
}
.indicator{
 width: 100%;
 position: absolute;
 text-align: center;
 bottom: 15px;
 z-index: 2;
}
.indicator a{
 display: inline-block;
 width: 20px;
 height: 5px;
 margin:0 3px;
 background: #fff;
}
.indicator-active{
 background: #FF8C00!important;
}

jquery代码:

$.carousel = {
 now : 0,     //当前显示的图片索引
 hasStarted : false,   //是否开始轮播
 interval : null,   //定时器
 liItems : null,    //要轮播的li元素集合
 len : 0,     //liItems的长度
 aBox : null,    //包含指示器的dom对象
 bBox : null,    //包含前后按钮的dom对象

 /**
  * 初始化及控制函数
  * @param bannnerBox string 包含整个轮播图盒子的id或class
  * @param aBox string 包含指示器的盒子的id或class
  * @param btnBox string 包含前后按钮的盒子的id或class
  */
 startPlay : function(bannnerBox,aBox,btnBox) {
  //初始化对象参数
  var that = this;
  this.liItems = $(bannnerBox).find('ul').find('li');
  this.len = this.liItems.length;
  this.aBox = $(bannnerBox).find(aBox);
  this.bBox = $(bannnerBox).find(btnBox);
  //让第一张图片显示,根据轮播图数量动态创建指示器,并让第一个指示器处于激活状态,隐藏前后按钮
  this.liItems.first('li').css({'opacity': 1, 'z-index': 1}).siblings('li').css({'opacity': 0, 'z-index': 0});
  var aDom = '';
  for (var i = 0; i < this.len; i++){
   aDom += '<a></a>';
  }
  $(aDom).appendTo(this.aBox);
  this.aBox.find('a:first').addClass("imgnum-active");
  this.bBox.hide();
  //鼠标移入banner图时,停止轮播并显示前后按钮,移出时开始轮播并隐藏前后按钮
  $(bannnerBox).hover(function (){
   that.stop();
   that.bBox.fadeIn(200);
  }, function (){
   that.start();
   that.bBox.fadeOut(200);
  });
  //鼠标移入指示器时,显示对应图片,移出时继续播放
  this.aBox.find('a').hover(function (){
   that.stop();
   var out = that.aBox.find('a').filter('.indicator-active').index();
   that.now = $(this).index();
   if(out!=that.now) {
    that.play(out, that.now)
   }
  }, function (){
   that.start();
  });
  //点击左右按钮时显示上一张或下一张
  $(btnBox).find('a:first').click(function(){that.next()});
  $(btnBox).find('a:last').click(function(){that.prev()});
  //开始轮播
  this.start()
 },
 //前一张函数
 prev : function (){
  var out = this.now;
  this.now = (--this.now + this.len) % this.len;
  this.play(out, this.now);
 },
 //后一张函数
 next : function (){
  var out = this.now;
  this.now = ++this.now % this.len;
  this.play(out, this.now);
 },
 /**
  * 播放函数
  * @param out number 要消失的图片的索引值
  * @param now number 接下来要轮播的图的索引值
  */
 play : function (out, now){
  this.liItems.eq(out).stop().animate({opacity:0,'z-index':0},500).end().eq(now).stop().animate({opacity:1,'z-index':1},500);
  this.aBox.find('a').removeClass('imgnum-active').eq(now).addClass('indicator-active');
 },
 //开始函数
 start : function(){
  if(!this.hasStarted) {
   this.hasStarted = true;
   var that = this;
   this.interval = setInterval(function(){
    that.next();
   },2000);
  }
 },
 //停止函数
 stop : function (){
  clearInterval(this.interval);
  this.hasStarted = false;
 }
};

$(function(){
$.carsouel.startPlay('#J_bg_bn','#J_bg_indicator','#J_bg_btn');
})

最初实现时使用面向过程的方法来完成,虽然可以达到想要的效果,但代码复用性不高,需要为页面上每一个需要轮播的模块分别写对应的函数。进行封装后,不需要写太多的代码,使用时只需调用carsouel的startPlay方法并传入三个参数即可,大大提高了易用性。

但是,当前代码的缺陷也非常明显,就是当一个页面上同时有多个轮播件需要轮播时,只有最后一个会正常工作,这是由于carsouel对象只有一个,可以通过复制carsouel对象来解决这个问题,如:

var banner1 = $.extend(true,{},carousel);
 var banner2 = $.extend(true,{},carousel);
 var banner3 = $.extend(true,{},carousel);
 banner1.startPlay('#J_bg_ban1','#J_bg_indicator1','#J_bg_btn1');
 banner2.startPlay('#J_bg_ban2','#J_sm_indicator2','#J_bg_btn2');
 banner3.startPlay('#J_bg_ban3','#J_sm_indicator3','#J_bg_btn3');

这样虽然可以满足需求,但每次调用都会复制出一个新的对象,不仅影响性能,carsouel对象内的方法还不能够重用,所以还需要进一步改进。

要想让多个轮播件可以同时使用carsouel对象,并且可以复用carsouel对象内部的函数,必须将carsouel对象作为一个构造函数或原型对象,每次需要使用时在进行实例化操作,这样可满足多个轮播件同时使用的需求,同时做到最大化的函数复用。我会在后续的文章中解决这个问题,欢迎关注或提出指导。

我是一个javascript的初学者,这是我第一次发文,对于上述问题我会继续努力,寻求最好的解决方法。感谢你们看完。给自己说个加油吧。

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

Javascript 相关文章推荐
js实现简单模态窗口,背景灰显
Nov 14 Javascript
Javascript调用C#代码
Jan 17 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
jquery密码强度校验
Dec 02 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
ES6 解构赋值的原理及运用
May 25 Javascript
jQuery 选择符详细介绍及整理
Dec 02 #Javascript
JQuery 动态生成Table表格实例代码
Dec 02 #Javascript
jQuery实现背景滑动菜单
Dec 02 #Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 #Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 #Javascript
基于jQuery实现的幻灯图片切换
Dec 02 #Javascript
JavaScript中清空数组的方法总结
Dec 02 #Javascript
You might like
php htmlspecialchars加强版
2010/02/16 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
Python 字典与字符串的互转实例
2017/01/13 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
django实现类似触发器的功能
2019/11/15 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
浅谈django 重载str 方法
2020/05/19 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
大学生暑假实习总结
2015/07/13 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
python迷宫问题深度优先遍历实例
2021/06/20 Python
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
Redis基本数据类型List常用操作命令
2022/06/01 Redis