jQuery图片轮播(一)轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播对象,可满足一般需求,需要使用时只需调用此对象的轮播方法即可。
demo:https://github.com/zsqosos/shopweb
具体代码如下:
HTML结构:

1 <div class="banner" id="J_bg_ban">
2 <ul>
3 <li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li>
4 <li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li>
5 <li><a href="#"><img src="banner_03.jpg" alt="广告图"/></a></li>
6 <li><a href="#"><img src="banner_04.jpg" alt="广告图"/></a></li>
7 <li><a href="#"><img src="banner_05.jpg" alt="广告图"/></a></li>
8 </ul>
9 <div class="indicator" id="J_bg_indicator">
10 </div>
11 <div class="ban-btn clearfloat" id="J_bg_btn">
12 <a class="next-btn fr" href="javascript:">></a><a class="prev-btn fl" href="javascript:"><</a>
13 </div>
14 </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对象作为一个构造函数或原型对象,每次需要使用时在进行实例化操作,这样可满足多个轮播件同时使用的需求,同时做到最大化的函数复用。我会在后续的文章中解决这个问题,欢迎关注或提出指导。
jQuery图片轮播(一)轮播实现并封装的更多相关文章
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- jquery图片轮播插件slideBox
效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...
- Jquery 图片轮播实现原理总结
Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- jquery特效(5)—轮播图③(鼠标悬浮停止轮播)
今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...
- jquery特效(4)—轮播图②(定时自动轮播)
周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...
- jquery特效(3)—轮播图①(手动点击轮播)
写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等,虽然今天我生日,但是代码还是得写的,不能找借口放松自己,原地踏步也算后退. 下面来 ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
随机推荐
- 浅谈JAVA中“增强”类的某个方法的几个中方法!
一.继承 使用场景:能够控制这个类的构造的时候,才可以使用继承. 优点:简单容易使用, 缺点:耦合性大大的增强,不利于后期的维护,所以对于继承这种方法,谨慎使用. 代码实现:二.装饰者模式 使用场景 ...
- win10- *.msi 软件的安装,比如 SVN安装报2503,2502
1, 以管理员身份打开cmd , C:\Windows\System32\cmd.exe 2,输入: msiexec /package "安装文件的全路径" 3,按下回车. 例 ...
- 从content-type设置看Spring MVC处理header的一个坑
我们经常需要在HttpResponse中设置一些headers,我们使用Spring MVC框架的时候我们如何给Response设置Header呢? Sooooooooooooo easy, 看下面的 ...
- Kafka水位(high watermark)与leader epoch的讨论
~~~这是一篇有点长的文章,希望不会令你昏昏欲睡~~~ 本文主要讨论0.11版本之前Kafka的副本备份机制的设计问题以及0.11是如何解决的.简单来说,0.11之前副本备份机制主要依赖水位(或水印) ...
- eclipse Maven新建一个项目并使用
安装参考这篇博文eclipse配置maven + 创建maven项目(三) 打开pom.xml 试着添加MySQL的JDBC驱动 添加如下配置, <dependency> <g ...
- HTML 4.01+5基礎知識
HTML 4.01+5 1.Html結構:html>head+body 2.Html快捷鍵:!加Tab(在sublime中) 3.雙標籤: ①常用標籤 h1.h2.h3.h4.h5.h6 p.c ...
- WPA/WPA2加密破解
WPA/WPA2无线密码破解这里主要介绍两种方法:穷举PIN码.穷举密码 穷举PIN码(共11000种组合)破解速度快,需要一些条件(路由器支持WPS.QSS功能),路由器信号良好.无论密码多复杂,条 ...
- oracle存储过程中is和as区别
在存储过程(PROCEDURE)和函数(FUNCTION)中没有区别:在视图(VIEW)中只能用AS不能用IS:在游标(CURSOR)中只能用IS不能用AS.
- 深入理解计算机系统chapter6
1. 2. 3. 存储器山
- 浅析强连通分量(Tarjan和kosaraju)
理解 在有向图G中,如果两点互相可达,则称这两个点强连通,如果G中任意两点互相可达,则称G是强连通图. 定理: 1.一个有向图是强连通的,当且仅当G中有一个回路,它至少包含每个节点一次. ...