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