bootstrap插件之Carousel

兼容：ie9以上

特点：滑动图片看起来永远只有两帧，过度完美；是html css js的完美配合；其中html的data属性起了关键性作用

前提：normalize.css  jquery.js

html 代码：

<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>

View Code

css 代码：

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

View Code

js 代码：

(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 = 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);

View Code

 

转载于:https://www.cnblogs.com/xiankui/p/3816599.html