bootstrap之 carousel.js轮播插件源码分析

最新推荐文章于 2025-06-21 10:07:34 发布

miao淼

最新推荐文章于 2025-06-21 10:07:34 发布

阅读量5.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： bootstrap学习和源码分析系列

本文链接：https://blog.youkuaiyun.com/wujimiao/article/details/70768720

本文将探讨如何分析和理解bootstrap的carousel.js插件源码，旨在帮助提升技术水平。作者指出，尽管所在的小外包公司对外包技术深度有所质疑，但他希望通过研究源码来学习更多知识，尤其是对于实现pc和移动端兼容的需求，bootstrap成为了解决方案。文章适合初学者，将进行简单的源码解读。

公司主要客户是外国人，主要交流语言是英语，公司里的人都使用一口流利的中国式英语进行对话，中国式英语在不正式场合没什么问题，大家都听得懂即可。可惜，我不会，所以接下来得好好练习英语口语了。相信我能够坚持下来，起码把中国式英语学会。

以前都是jQuery或者zepto（移动端）布局完事，后来公司要求pc端移动端兼容，然后想到bootstrap，当然，公司项目很小，小外包公司嘛。所以浏览器兼容跟随bootstrap新版本走，不支持css3的全部没戏。

软件行业都有外包公司技术深度不够（就是菜）说法，作为小外包公司，深有体会。但我想改变现状，所以打起源码主意，其实研究好的源码，会学到很多知识。

今天来研究下 carousel.js轮播插件源码，依然会是简单的源码解读，大神绕道。

/* ========================================================================
 * 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)
 * ======================================================================== */


+function ($) {
  'use strict';//严格模式，能够限制一些js代码弊端，糟粕，为新js标准铺路

  // CAROUSEL CLASS DEFINITION
  // =========================
  //Carousel类构造函数
  var Carousel = function (element, options) {
    this.$element    = $(element)//选择Dom元素
    this.$indicators = this.$element.find('.carousel-indicators')//找到含有carousel-indicators类名的元素（轮播切换下标）
    this.options     = options//选项
    this.paused      = null //暂停切换
    this.sliding     = null //滑动
    this.interval    = null //每个轮播图切换时间间隔
    this.$active     = null //活动图片标示（展示那张轮播图）
    this.$items      = null //图片数量

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

    this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element
      .on('mouseenter.bs.carousel', $.proxy(this.pause, thi