bootstrap插件学习-bootstrap.carousel.js

bootstrap插件学习-bootstrap.carousel.js

先看bootstrap.carousel.js的结构

var Carousel = function (element, options){} //构造器
Carousel.prototype = {} // 构造器原型
$.fn.carousel = function ( option ) {} //jQuery原型上自定义的方法
$.fn.carousel.defaults ={} //默认参数
$.fn.carousel.Constructor = Carousel // 重写jQuery原型上自定义方法的构造器名
$(function (){}) // 初始化

HTML结构

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item">
            <img alt="" src="http://wrongwaycn.github.io/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg">
            <div class="carousel-caption">
                <h4>即使杀光所有报晓的公鸡，天，还是会亮的</h4>
                <p> @shifeike: 昨天是李尚平被枪杀10周年，我发的那条纪念微博，成为我的新浪微博账号最后一条微博。这个2010年1月为反对红中抢笔而注册的微博，两年多时间里发了14538条微博，加上被删除的差不多近200万字，积累了96269条粉丝，自此灰飞烟灭。 </p>
            </div>
        </div>
        <div class="item">
            <img alt="" src="http://wrongwaycn.github.io/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg">
            <div class="carousel-caption">
                <h4>如果人民不欢迎我们，就该我们下台了</h4>
                <p> 【胡耀邦语录】①历史是混不过去的。②民主、自由、平等、博爱等观念是人类精神的一大解放。③如果人民不欢迎我们，就该我们下台了。④不懂的不要装懂，不通的不要装通，不服的不要装服。⑤中国的出路是民主和科学。⑥一个精神上、组织上被禁锢被压制的不自由民族怎么可能与其他国家进行自由竞争呢？ </p>
            </div>
        </div>
        <div class="item active">
            <img alt="" src="http://wrongwaycn.github.io/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg">
            <div class="carousel-caption">
                <h4>国家像需要空气一样需要变革</h4>
                <p> 据戈尔巴乔夫基金会新闻处通报，俄总统梅德韦杰夫今天向前苏联总统戈尔巴乔夫颁发圣徒安德烈·佩尔沃兹万内勋章。戈尔巴乔夫在受勋时表示感谢，并称很激动。他坦言，对自己做过的事情问心无愧。他强调，他进行改革不是为了赢得敬重和荣誉，而是因为认识到，“国家像需要空气一样需要变革”。他承认犯过错误，并至今还在为这些错误而烦恼。但他认为：“短短几年所走过的路，使专制的过去永远成为了历史。” </p>
            </div>
        </div>
    </div>
    <a class="left carousel-control" data-slide="prev" href="#myCarousel">‹</a>
    <a class="right carousel-control" data-slide="next" href="#myCarousel">›</a>
</div>

先从初始化开始

$(function () {
    $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
      var $this = $(this), href
          //获得整个控件的jQuery对象
        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
        , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data())//{slide:prev}或是{slide:next}
      $target.carousel(options)//整个控件对象调用carousel方法
      e.preventDefault()//阻止冒泡
    })
  })

根据HTML结构，为拥有data-slide属性的标签绑定click事件，如果我们点击向左按钮，代码会获取该标签的href，并获取整个控件的对象。接着让整个控件调用jQuery原型上的carousel方法。另外这个方法中，是阻止冒泡的。

/*
  * jQuery原型上自定义的方法
  * */
  $.fn.carousel = function ( option ) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('carousel')
        , options = typeof option == 'object' && option
      if (!data) $this.data('carousel', (data = new Carousel(this, options)))//实例化构造器
      if (typeof option == 'number') data.to(option)
      else if (typeof option == 'string' || (option = options.slide)) data[option]()
      else data.cycle()
    })
  }

初次调用carousel方法时，因为$(this).data('carousel')为未定义，实例化构造器，最后进过一些判断，我们执行data的cycle方法，实际上就是实例的方法cycle方法，先看构造器。

/*
  * 构造器
  * */
  var Carousel = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.carousel.defaults, options)
    this.options.slide && this.slide(this.options.slide)
    this.options.pause == 'hover' && this.$element//为整个控件绑定事件
      .on('mouseenter', $.proxy(this.pause, this))
      .on('mouseleave', $.proxy(this.cycle, this))
  }

这里实例化的时候，this是实例对象，这个注意一下，合并参数之后，执行原型上的slide方法，接着为整个控件绑定mouseenter和mouseleave事件，处理方法分别是原型上的pause和cycle方法。先看slide方法

slide: function (type, next) {
      var $active = this.$element.find('.active')//找到当前显示的对象
        , $next = next || $active[type]()//获取当前显示对象的前一个同级对象
        , isCycling = this.interval
        , direction = type == 'next' ? 'left' : 'right'//我们点击左边按钮时,direction = right
        , fallback  = type == 'next' ? 'first' : 'last'//同上，fallback = last
        , that = this

      this.sliding = true//设置参数

      isCycling && this.pause()

      $next = $next.length ? $next : this.$element.find('.item')[fallback]()//手动查找

      if ($next.hasClass('active')) return//同级的对象上是没有active类的

      if (!$.support.transition && this.$element.hasClass('slide')) { //整个控件拥有slide类
        this.$element.trigger('slide')
        $active.removeClass('active')//当前显示的对象去除active类
        $next.addClass('active') //给前一个对象加上active类
        this.sliding = false //参数被设置为false
         this.$element.trigger('slid')
      } else {
        $next.addClass(type)
        $next[0].offsetWidth // force reflow
        $active.addClass(direction)
        $next.addClass(direction)
        this.$element.trigger('slide')
        this.$element.one($.support.transition.end, function () {
          $next.removeClass([type, direction].join(' ')).addClass('active')
          $active.removeClass(['active', direction].join(' '))
          that.sliding = false
          setTimeout(function () { that.$element.trigger('slid') }, 0)
        })
      }

      isCycling && this.cycle()

      return this
    }

slide方法主要的工作是这样的：找到当前显示的内容对象，并根据它找到它的前一个紧连的同级对象，接下来的操作是，将原来显示的对象去掉active类，而将前一个同级对象加上active类(这个第一次调用的情况,else部分一会看)，去除active类，带来的效果，我们查看一下bootstrap.css可以发现。

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block; //show
}

.carousel-inner > .active {
  left: 0;
}


.carousel-inner > .item {
  position: relative;
  display: none;//hide
  -webkit-transition: 0.6s ease-in-out left;
     -moz-transition: 0.6s ease-in-out left;
       -o-transition: 0.6s ease-in-out left;
          transition: 0.6s ease-in-out left;
}

又是显示和隐藏。。

这里注意一点，我们点击了向左移按钮，才去实例化构造器的，才去绑定控件的mouseenter和mouseleave事件的，也就是说，如果我们不点击的话，控件是不拥有这个事件的，如果你想让控件运动，你必须点击一下按钮，或者自己初始化。

ok，点击完之后，我们鼠标会移开，那就看一下mouseleave的事件吧。

/*
    * 让控件自动翻页执行
    * */
    cycle: function () {
      this.interval = setInterval($.proxy(this.next, this), this.options.interval)
      return this
    }

每5秒执行一下原型上的next方法，那有开启定时器，就有关闭定时器的方法。

/*
    * 清除定时器
    * */
  , pause: function () {
      clearInterval(this.interval)
      this.interval = null
      return this
    }

看一下next方法

next: function () {
      if (this.sliding) return
      return this.slide('next')
    }

之前在slide方法中，this.sliding值已经置为false，执行slide方法，在运行slide方法时，前一个同级节点换成了下一个同级节点。插件默认是自动向后翻页。最终执行完，this.sliding的值依旧是false，这样，定时器每5秒执行，都会执行slide方法，并传入'next'参数。

同理的prev方法

prev: function () {
      if (this.sliding) return
      return this.slide('prev')//由于没有this.slide的值，重新调用slide方法，传入'prev'
    }

至此我们还有一个方法没有接触

to: function (pos) {
      var $active = this.$element.find('.active')//this为控件对象，找到控件中拥有active类的对象
        , children = $active.parent().children()//获得所有内容对象
        , activePos = children.index($active) // 获得拥有active类的对象相对于内容组的位置，内容组有3块对象，默认的话，是2
        , that = this

      if (pos > (children.length - 1) || pos < 0) return //如果你输入的数字大于内容组的子对象个数，或是小于0则不合法

       if (this.sliding) {
         return this.$element.one('slid', function () {  //this.sliding为false
           that.to(pos)
        })
      }

      if (activePos == pos) {
        return this.pause().cycle()
      }

      return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))//跳到指定页面
    }

如果carousel方法中传入数字，就可以跳入这个方法执行。这个方法的作用主要是跳到指定页数的内容区。

内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。