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

插件简介:

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

代码:

<!-- BS内部通过设置data属性来减少js代码的书写 -->
  <div  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中文网