Bootstrap之javascript插件---Carousel（类似无缝滚动效果）

插件简介：

　　一个幻灯片组件，用于循环元素，比如旋转木马。目前不支持嵌套

代码：

<!-- BS内部通过设置data属性来减少js代码的书写 -->
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators 对应小点的导航-->
    <ol class="carousel-indicators">
<!-- data-slide-to 即为轮播的索引，从0开始     -->
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

<!-- Wrapper for slides 对应轮播组件的内容 -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
<!-- 省略号出即为自己需要定义的内容 -->
        <img src="..." alt="...">
<!-- carousel-caption 字幕，即在图片上自定义的文字 -->
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="..." alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      ...
    </div>

<!-- Controls 对应轮播组件想左或者向右切换的按钮 -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

※ 注：当我们不确定背景（background）需不需要设置一些其他的属性时，比如img等，最好通过background-color来设置背景色

需要初始化的活动元素：

　　.active类需要添加到其中一个幻灯片。 否则，传送带将不可见。

非必要图标类：

　　.glyphicon .glyphicon-chevron-left和.glyphicon .glyphicon-vvvron-right类对于控件来说并不一定需要。Bootstrap提供 .icon-prev 和 .icon-next 作为简单的 unicode 替代品。

Optional captions（可选标题）：

　　.carousel-caption 字幕，任何 .item 中的.carousel-caption元素都可以轻松地为幻灯片添加字幕。在那里放置任何可选的HTML，它将自动对齐和格式化

同样，也可以通过 .carousel-caption 来为文本设置相应的CSS样式（此处可能会出现优先级的问题，具体问题具体分析）。

用法注意点：

※  使用多个轮播：

　　传送带需要在最外面的容器（.carousel）上使用传送带控件的 ID 才能正常工作。添加多个传送带时，或更改传送带的ID时，请务必更新相关控件

其他注意点请参考BS官网或Bootstrap中文网