Bootstrap2用户指南
5.12.1 使用方法
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

标签页

工具提示

弹出提示

警告框

按钮

折叠

轮番

Bootstrap轮番插件Carousel是一个灵活的、响应式的、无缝循环播放的幻灯片切换插件,它的内容可以是图片、视频、或者其他任何内容。

Bootstrap轮番插件Carousel需要 bootstrap-carousel.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-carousel.js 文件。

使用方法

Bootstrap中,一个轮番包含在一个 class="carousel" 的容器中,其中包含轮番指示器、轮番内容、轮番的控制按钮。还要为容器定义一个 id,以确保在播放时,能够对控制按钮和轮番指示器进行正常定位。如:

<div id="myCarousel" class="carousel">
  ...
</div>

1)轮番指示器

轮番指示器是一个 class="carousel-indicators" 的有序列表,用来指示有多少个轮番条目,它包含的 <li> 元素的个数,就是轮番条目的个数。还可以为默认活动的 <li> 元素添加 .active 类。如:

<ol class="carousel-indicators">
  <li class="active"></li>
  <li></li>
  <li></li>
</ol>

2)轮番内容

轮番内容是一个轮番条目的列表,整个列表包含在一个 class="carousel-inner" 的容器中,列表中可以包含多个轮番条目,每个轮番条目包含在一个 class="item" 的容器中。还可以为默认活动的轮番条目添加 .active 类,并确保与列表指示器中的定义一致。

最简单的轮番内容只包含图片就可以了。如:

<div class="carousel-inner">
  <div class="item active">
    <img src="slide-01.jpg" />
  </div>
</div>

稍微复杂的轮番条目还可以包含标题和说明,并放在一个 class="carousel-caption" 的容器中。如:

<div class="carousel-inner">
  <div class="item active">
    <img src="slide-01.jpg" />
    <div class="carousel-caption">
      <h4>Second Thumbnail label</h4>
      <p>Cras justo odio, dapibus ...</p>
    </div>
  </div>
</div>

3)轮番的控制按钮

轮番的控制按钮,用来人工控制轮番的播放,它包含两个按钮,一个控制向前播放,一个控制向后播放。使用 .carousel-control 定义按钮的样式,.left 和 .right 定义按钮的浮动方向。href 属性定义轮番包含框的 id。

<a class="carousel-control left"  href="#myCarousel">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel">&rsaquo;</a>

一个简单的轮番就定义完成了,完整代码如下:

<div id="myCarousel" class="carousel">
  <!-- Carousel indicators -->
  <ol class="carousel-indicators">
    <li class="active"></li>
    <li></li>
    <li></li>
  </ol>

  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="slide-01.jpg" />
    </div>
    <div class="item">
      <img src="slide-02.jpg" />
    </div>
    <div class="item">
      <img src="slide-03.jpg" />
    </div>
  </div>

  <!-- Carousel nav -->
  <a class="carousel-control left"  href="#myCarousel">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel">&rsaquo;</a>
</div>

至此,一个轮番就定义好了。并且,无需编写任何JavaScript代码,就可以自动播放。播放时,会在右上角以小圆圈来指示轮番条目的个数,并以白色背景的小圆圈来指示当前条目。用户可以点击任意的小圆圈,让它成为当前条目。效果如图 5‑19所示:

Bootstrap轮番插件Carousel
图5-19 Bootstrap轮番插件Carousel

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验