澳门威利斯人_威利斯人娱乐「手机版」

来自 办公软件 2019-08-24 09:48 的文章
当前位置: 澳门威利斯人 > 办公软件 > 正文

jQuery图片轮播实现并封装,利用构造函数和原型

行使面向对象自身入手写了八个卷入好的jquery轮播对象,可满意一般供给,需求接纳时只需调用此指标的轮播方法就能够。

上一篇文中完结的卷入,还设有三个没不平常,就是该轮播对象不可能在同一页面中重复使用,本文将因此整合使用javascript的构造函数和原型模式成立对象来减轻那些难点。

 

 

行使面向对象自身入手写了贰个封装好的jquery轮播对象,可满意一般必要,必要运用时只需调用此目的的轮播方法就可以。

demo:

切实代码如下:

HTML结构:

图片 1

 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:">&gt;</a><a class="prev-btn fl" href="javascript:">&lt;</a>
13   </div>
14 </div>

图片 2

 

 css样式:

图片 3

.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;
}

图片 4

jquery代码:

图片 5

$.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');
})

图片 6

 

开始时期落成时接纳面向进度的格局来成功,纵然能够直达想要的功效,但代码复用性不高,供给为页面上每二个急需轮播的模块分别写对应的函数。举办包装后,没有要求写太多的代码,使用时只需调用carsouel的startPlay方法并传播四个参数就可以,大大进步了易用性。

不过,当前代码的破绽也充裕分明,就是当贰个页面上同时有多少个轮播件需求轮播时,唯有最后叁个会健康办事,那是由于carsouel对象唯有四个,能够经过复制carsouel对象来缓和这么些难点,如:

图片 7

    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');

图片 8

 

与上述同类就算能够满意急需,但老是调用都会复制出三个新的对象,不止影响属性,carsouel对象内的法子还不可见重用,所以还索要更进一竿更正。

要想让五个轮播件能够而且使用carsouel对象,并且能够复用carsouel对象内部的函数,必得将carsouel对象作为一个构造函数或原型对象,每趟供给选拔时在开展实例化操作,那样可满足四个轮播件同期使用的供给,同一时间到位最大化的函数复用。作者会在继续的稿子中搞定这些难点,款待关心或建议引导。

demo:

尚无看过上一篇文章的意中人能够点此查看上一篇文章 (jQuery图片轮播完毕并封装(一))

切实代码如下:

首先回看一下,上文的难点所在,上文中的carsouel对象是选用字面量的法子来定义的,那样carsouel本便是一个实例,想要使用在多处时,这么些目标的方法会发生争辨,最终只会实行最后的这一个。而经过行使构造函数的主意来定义对象carsouel,每一次要求选拔时只要求用new操作符来实例化多个新指标,页面中须要几处轮播就实例化多少个对象,那样就可以满意要求。所以,将代码改成以下方式。

HTML结构:

function Carousel(){
  this.now = 0;          //当前显示的图片索引
  this.hasStarted = false;     //是否开始轮播
  this.interval = null;      //定时器
  this.liItems = null;       //要轮播的li元素集合
  this.len = 0;         //liItems的长度
  this.aBox : null;        //包含指示器的dom对象
  this.bBox : null;        //包含前后按钮的dom对象
  /**
   * 初始化及控制函数
   * @param bannnerBox string 包含整个轮播图盒子的id或class
   * @param aBox string 包含指示器的盒子的id或class
   * @param btnBox string 包含前后按钮的盒子的id或class
   */
  this.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("indicator-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()
  };
  //前一张函数
  this.prev = function (){
    var out = this.now;
    this.now = (--this.now   this.len) % this.len;
    this.play(out, this.now);
  };
  //后一张函数
  this.next = function (){
    var out = this.now;
    this.now =   this.now % this.len;
    this.play(out, this.now);
  };
  /**
   * 播放函数
   * @param out number 要消失的图片的索引值
   * @param now number 接下来要轮播的图的索引值
   */
  this.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');
  };
  //开始函数
  this.start = function(){
    if(!this.hasStarted) {
      this.hasStarted = true;
      var that = this;
      this.interval = setInterval(function(){
        that.next();
      },2000);
    }
  };
  //停止函数
  this.stop = function (){
    clearInterval(this.interval);
    this.hasStarted = false;
  }
};
<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> 

调用时选拔new操作符,如下:

 css样式:

var banner1 = new Carousel();
  var banner2 = new Carousel();
  var banner3 = new 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');

本文由澳门威利斯人发布于办公软件,转载请注明出处:jQuery图片轮播实现并封装,利用构造函数和原型

关键词: 澳门威利斯人