BootStrap carousel 轮播图原码分析

/* ========================================================================

* Bootstrap: carousel.js v3.3.7

* http://getbootstrap.com/javascript/#carousel

* ========================================================================

* Copyright 2011-2016 Twitter, Inc.

* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

* ======================================================================== */

// data-interval：轮番图自动轮播的等待时间，如果为false则不自动轮播，默认为5000ms,data-pause：指定鼠标停留在轮换图上是否停止轮播，

离开后继续自动轮播,data-wrap：指定是否持续轮播

//+号是函数立即执行的意思。

+ function ( $) {

//使用严格模式的好处

//1.警告对象中重复的键

// 2.不允许未声明的变量

// 3.函数中不允许出现重复的参数

// 4.限制arguments

'use strict';

// CAROUSEL CLASS DEFINITION

// =========================

var Carousel = function ( element, options) {

//选择dom对象

this. $element = $( element)

//找到含有carousel-indicators的类

this. $indicators = this. $element. find( '.carousel-indicators')

//选项

this. options = options

//轮播图暂停

this. paused = null

// 滑动

this. sliding = null

//每个轮播切换的时间间隔

this. interval = null

//正在轮播的哪一张

this. $active = null

//封装好的jquery对象，将所有的图片放在这个对象里

this. $items = null

// 如果this.options.keyboard为true ，那么就监听键盘事件

// keydown.bs.carousel是bootstrap自己设定的函数事件，类似于“click”这样的，后面是函数 $.proxy 描述：接受一个函数，然后返回一个新函数，

并且这个新函数始终保持了特定的上下文语境。所以实现的功能是在this。keydown中强制执行this。 this.keydown是prototype中的一个函数

this. options. keyboard && this. $element. on( 'keydown.bs.carousel', $. proxy( this. keydown, this))

// 不是移动设备(不存在ontouchstart事件)，那么当options.pause == 'hover'时实现鼠标的悬浮暂停

this. options. pause == 'hover' && !( 'ontouchstart' in document. documentElement) && this. $element

. on( 'mouseenter.bs.carousel', $. proxy( this. pause, this))

. on( 'mouseleave.bs.carousel', $. proxy( this. cycle, this))

}

// 版本号

Carousel. VERSION = '3.3.7'

// 每一个轮播默认的运行时间是600ms

Carousel. TRANSITION_DURATION = 600

// 轮播图的默认配置

Carousel. DEFAULTS = {

// 每一个轮播之间的间隔是5s

interval: 5000,

// 默认的暂停方式是hover，当你鼠标移动上面的时候即可暂停

pause: 'hover',

// 连续播放

wrap: true,

// 键盘输入为true

keyboard: true

}

// 键盘事件，做出相应的回馈

Carousel. prototype. keydown = function ( e) {

// 如果忽略大小写的input和textarea 匹配目标事件的名称，那么就返回无效

// 本质是用正则表达式验证目标事件的名字是不是有in