先看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方法中传入数字，就可以跳入这个方法执行。这个方法的作用主要是跳到指定页数的内容区。
内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。