bootstrap插件学习-bootstrap.carousel.js

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

<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()//阻止冒泡
})
})

/*
* 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()
})
}

/*
* 构造器
* */
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))
}

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
}

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

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

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

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

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]))//跳到指定页面
}