Bootstrap插件carousel源码的学习

使用说明

轮播的HTML结构可以分为：容器、项目符号、轮播单元、左右的箭头

• 容器：需要data-ride="carousel"用于初始化；对应的id或class作为子元素的目标
• 项目符号：需要在"carousel-indicators"的容器中；data-target或href指向容器；data-slide-to指向对应的轮播单元；需要有"active"类保证在一开始就激活
• 单元：需要"item"作为类；需要"active"类保证在一开始就显示
• 箭头：data-target或hred指向容器；data-slide指向方向

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators">    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>    <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>    <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>  </ol>  <div class="carousel-inner">    <div class="item active">      <img alt="First slide" src="http://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg">    </div>    <div class="item">      <img alt="Second slide" src="http://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg">    </div>    <div class="item">      <img alt="Third slide" src="http://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg">    </div>  </div>  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">    <span class="glyphicon glyphicon-chevron-left"></span>  </a>  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">    <span class="glyphicon glyphicon-chevron-right"></span>  </a></div>

核心思想

1. 点击bullet、左右按钮、自动轮播最终都是调用slide(type, next)方法，传入方向和对应的下一个item
2. slide里的逻辑
   • 如果有bullet容器，则先完成bullet的切换
   • 若不需要过渡效果，则将当前的item去除"active"类，下个"item"增加"active"类即可。若要过渡效果，则：
     • 下个item增加"next"或"prev"，使得item定位在轮播框的左侧或右侧
     • 当前item增加"left"或"right"，使得item左移或右移
     • 下个item增加"left"或"right"，完成左移或右移效果

初始化

// 为bullet和箭头绑定同一个点击处理事件  $(document)    .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)    .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)  // 页面加载完后，carousel初始化组件  $(window).on('load', function () {    $('[data-ride="carousel"]').each(function () {      var $carousel = $(this)      Plugin.call($carousel, $carousel.data())    })  })

具体分析

• slide方法

/** * 判断方向，把next移入可视区内 * @param  {string}   type 移动的方向 * @param  {object} next 将要被激活的item * @return {object}        Carousel实例 */Carousel.prototype.slide = function (type, next) {  var $active   = this.$element.find('.item.active') // 当前激活的item  var $next     = next || this.getItemForDirection(type, $active)  var isCycling = this.interval  var direction = type == 'next' ? 'left' : 'right'  var that      = this  if ($next.hasClass('active')) return (this.sliding = false)  var relatedTarget = $next[0]  var slideEvent = $.Event('slide.bs.carousel', {    relatedTarget: relatedTarget,    direction: direction  })  this.$element.trigger(slideEvent)  if (slideEvent.isDefaultPrevented()) return  this.sliding = true  isCycling && this.pause()  // 如果有bullet，则完成bullet的切换  if (this.$indicators.length) {    this.$indicators.find('.active').removeClass('active')    var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])    $nextIndicator && $nextIndicator.addClass('active')  }  var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"  if ($.support.transition && this.$element.hasClass('slide')) {    // 下个item，增加类如"next"，使下个item定位在右边    $next.addClass(type)     $next[0].offsetWidth // force reflow    // 当前item，增加类如"left"，使他左移    $active.addClass(direction)    // 下个item再增加类如"left"，使得他左移    $next.addClass(direction)    $active      .one('bsTransitionEnd', function () {        $next.removeClass([type, direction].join(' ')).addClass('active')        $active.removeClass(['active', direction].join(' '))        that.sliding = false        setTimeout(function () {          that.$element.trigger(slidEvent)        }, 0)      })      .emulateTransitionEnd(Carousel.TRANSITION_DURATION)  } else {    // 若不支持过渡，只是当初的当前item解除激活，激活下个item    $active.removeClass('active')    $next.addClass('active')    this.sliding = false    this.$element.trigger(slidEvent)  }  isCycling && this.cycle()  return this}

总结：

1. 通过方向的类"left"或"right"，位置的类"next"或"prev"的配合，完成轮播的切换效果