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方法中传入数字，就可以跳入这个方法执行。这个方法的作用主要是跳到指定页数的内容区。

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