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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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
apache rewrite_module模块使用教程
2008/01/10 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
让python json encode datetime类型
2010/12/28 Python
python继承和抽象类的实现方法
2015/01/14 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
培训主管岗位职责
2014/02/01 职场文书
演讲比赛策划方案
2014/06/11 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
西柏坡观后感
2015/06/08 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
nginx 配置缓存
2022/05/11 Servers