利用面向对象自己动手写了一个封装好的 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 += '';
- }
- $(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 对象作为一个构造函数或原型对象,每次需要使用时在进行实例化操作,这样可满足多个轮播件同时使用的需求,同时做到最大化的函数复用。我会在后续的文章中解决这个问题,欢迎关注或提出指导。
本文转载自:http://www.cnblogs.com/zsqos/p/6126782.html
来源: http://www.bubuko.com/infodetail-1857248.html