<div class="wrapper">    <div class="carousel" id="carousel-generic">        <!--  Indicators  -->        <ul class="carousel-indicators">            <li data-slide-to="0" data-target="#carousel-generic" class="active">0</li>            <li data-slide-to="1" data-target="#carousel-generic">1</li>            <li data-slide-to="2" data-target="#carousel-generic">2</li>        </ul>        <!--  wrapper for slides  -->        <div class="carousel-inner">            <div class="item active">                <img alt="first slide" src="images/slide1.png" />            </div>            <div class="item">                <img alt="second slide" src="images/slide2.png" />            </div>            <div class="item">                <img alt="third slide" src="images/slide3.png" />            </div>        </div>        <!--  controls  -->        <a class="carousel-control left" data-slide="prev" href="#carousel-generic">            <span class="carousel-chevron-left">&lt;</span>        </a>        <a class="carousel-control right" data-slide="next" href="#carousel-generic">            <span class="carousel-chevron-right">&gt;</span>        </a>    </div></div>

.wrapper{    width:900px;    overflow: hidden;    margin: 0 auto;}.carousel{    position: relative;    width:900px;}.carousel-inner{    position: relative;    width: 100%;    overflow: hidden;}.carousel-inner .item{    position: relative;    display: none;    -webkit-transition:0.06s ease-in-out left;    -ms-transition: 0.6s ease-in-out left;    transition:0.6s ease-in-out left;}.carousel-inner .active,.carousel-inner .next,.carousel-inner .prev{    display: block;}.carousel-inner .active{    left:0;}.carousel-inner .next,.carousel-inner .prev{    position: absolute;    top:0;    width: 100%;}.carousel-inner .next{    left:100%;}.carousel-inner .prev{    left:-100%;}.carousel-inner .next.left,.carousel-inner .prev.right{    left:0;}.carousel-inner .active.left{    left:-100%;}.carousel-inner .active.right{    left:100%;}.carousel-control {    position: absolute;    top:0;    bottom:0;    width:15%;    font-size: 20px;    color:#fff;    text-align: center;    text-shadow:0 1px 2px rgba(0, 0, 0, 0.6);    opacity: 0.5;}.carousel-control.left {  left:0;  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);  background-repeat: repeat-x;}.carousel-control.right {  right: 0;  left: auto;  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);  background-repeat: repeat-x;}.carousel-control:hover,.carousel-control:focus {  color: #ffffff;  text-decoration: none;  outline: none;  opacity: 0.9;}.carousel-indicators{    position: absolute;    bottom:10px;    width:60%;    left:50%;    margin-left: -30%;    padding-left: 0;    text-align: center;    z-index: 15;}.carousel-indicators li{    display: inline-block;    width: 10px;    height: 10px;    margin:1px;    text-indent: -9999px;    line-height: 0;    cursor: pointer;    background-color: #000 \9;    background-color: rgba(0, 0, 0, 0);    border:1px solid #fff;    border-radius: 10px;}.carousel-indicators .active{    width:12px;    height:12px;    margin: 0;    background-color: #fff;}

(function ($) {    "use strict";    var Carousel = function (element, options) {        this.$element = $(element);  // div.carousel        this.$indicators = this.$element.find(".carousel-indicators");  // ul.carousel-indicators        this.$items = this.$element.find(".item");        this.paused  = false,        // 动画停止了？(false)        this.sliding = false,        // 正在滑动中?(false)        this.interval = null,        // 有定时器吗？(null)        this.$active = null;        this.options = options;        // 合并后的options        this.options.pause === "hover" && this.$element.            on("mouseenter", $.proxy(this.pause, this)).            on("mouseleave", $.proxy(this.cycle, this));    };    Carousel.DEFAULTS = {        interval: 2000,        pause: "hover"    };    Carousel.fn = Carousel.prototype;    Carousel.fn.pause = function () {        this.paused = true; // 状态标记        this.interval = clearInterval(this.interval); // this.interval is undefined        return this;    };    Carousel.fn.cycle = function (e) {        e || (this.paused = false); // 标记状态        // 先清除定时器（如果有的话）        this.interval && clearInterval(this.interval);        // 在重设循环滚动的定时器        this.interval = setInterval($.proxy(this.next, this), this.options.interval);        return this;    };    Carousel.fn.next = function () {        if (this.sliding) {            return;        }        return this.slide("next");    };    Carousel.fn.prev = function () {        if (this.sliding) {            return;        }        return this.slide("prev");    };    Carousel.fn.getActiveIndex = function () {        this.$active = this.$element.find(".item.active");        return this.$items.index(this.$active);     };    // type: ["next", "prev"]; next: targetElement    Carousel.fn.slide = function (type, next) {        var $active = this.$element.find(".item.active"),            $next = next || $active[type](), // 下一帧的目标元素（注：最后一帧的下一帧是第一帧）            direction = (type === "next" ? "left" : "right"),            fallback = (type === "next" ? "first" : "last"),            isCycling = this.interval,            that = this;        // 边界元素问题        if (!$next.length) {            $next = this.$items[fallback]();        }        if ($next.hasClass(‘active‘)) {            return false;        }        // 状态：滚动中。。。        this.sliding = true;        // 停止当前动画        isCycling && this.pause();            // 开启新的动画 600毫秒        // o my god!!!!! the sequence is so important, but dont know why!!!        $next.addClass(type);        $next[0].offsetWidth;   //  force reflow!!!!!!!!!!!!!!        $next.addClass(direction);        $active.addClass(direction);                // indicator同步改变样式        if (this.$indicators.length) {            this.$indicators.find(‘.active‘).removeClass(‘active‘);            this.$element.one("slide.bs.carousel", function () {                // change indicators                var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()]);                $nextIndicator && $nextIndicator.addClass("active");            });        }        // 动画完成后，重置样式或开启下一帧动画        var transitionend = function () {            $next.removeClass([type, direction].join(" ")).addClass("active");            $active.removeClass(["active", direction].join(" "));            // 立即触发            setTimeout(function () {                // changer indicators or begin another animation (Carousel.fn.to)                that.$element.trigger("slide.bs.carousel");            }, 0);                        that.sliding = false;            isCycling && that.cycle();                    };        setTimeout(transitionend, 600);  // 时间和css对应    };    // indicator and carousel-control with silde to     Carousel.fn.to = function (pos) {        var that = this,            activeIndex = this.getActiveIndex();        if (pos > (this.$items.length - 1) || pos < 0) {            return;        }        // 运动中。。。。。。。。。        if (this.sliding) {            // 当前动画完成后，会立即触发 slide.bs.carousel 事件            return this.$element.one("slide.bs.carousel", function () { that.to(pos); });        }        if (activeIndex === pos) {            return this.pause().cycle();        }        // 通过next或prev的方式到达this.$items[pos]        return this.slide(pos > activeIndex ? "next" : "prev", $(this.$items[pos]));    };    // jquery 插件    $.fn.carousel = function (option) {        return this.each(function () {            var $this = $(this),                data = $this.data("bs.carsouel"),                options = $.extend({}, Carousel.DEFAULTS, typeof option == ‘object‘ && option);            if (!data) {                // 妙处：把所有方法附加到carousel对象上  ==>                  $this.data("bs.carousel", (data = http://www.mamicode.com/new Carousel(this, options)));                // $this.data("bs.carousel") = data  就是滚动对象的引用            }            if (typeof option === "number") {                // 直接切换到第几帧                data.to(option);            } else if (typeof option === "string") {                data[option]();            } else if (options.interval) {                // interval is true 则自动播放                data.pause().cycle();            }        });    };    $.fn.carousel.Constructor = Carousel;    // 事件绑定    $(document).on("click.carousel.data-api", "[data-slide-to], [data-slide]", function (e) {        e.preventDefault();        var $this = $(this),            $target = $($this.attr("data-target") || $this.attr("href")),            slide = $this.attr("data-slide"),            slideIndex = $this.attr("data-slide-to");        if (slide) {            $target.data("bs.carousel").slide(slide);        } else if (slideIndex) {            $target.data("bs.carousel").to(slideIndex);        }            });    // 应用    $(".carousel").carousel(); })(jQuery);