Bootstrap3实用教程
4.12.1 轮番插件的使用方法
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

标签页

工具提示

弹出提示

警告框

按钮

折叠

轮番

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

使用方法

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

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

1)轮番指示器

轮番指示器是一个 class="carousel-indicators" 的有序列表,用来指示轮番的播放状态,对用户表现为一系列的小圆圈,实心圆表示当前处于活动状态的轮番条目。

轮番指示器中,子元素 <li> 的个数必须与轮番内容中的元素个数相等。子元素 <li> 的 data-target 属性值指示目标对象,必须设置为轮番容器的 id 值;data-slide-to 属性指示点击小圆圈时所要播放的轮番条目的索引值(索引从 0 开始)。还可以为默认处于活动状态的轮番条目添加 .active 类。默认是第一个条目处于活动状态。如:

<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>

2)轮番内容

轮番内容是一个轮番条目的列表,整个列表包含在一个 class="carousel-inner" 的容器中,列表中可以包含多个轮番条目,每个轮番条目包含在一个 class="item" 的容器中。还可以为默认处于活动状态的轮番条目添加 .active 类。默认是第一个条目处于活动状态。如果添加 .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。data-slide 属性定义播放顺序,取值 "prev" 表示播放上一个条目,取值 "next" 表示播放下一个条目。

<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>

<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

至此,一个轮番就定义好了。并且,无需编写任何JavaScript代码就可以自动播放。完整代码如下:

<div id="myCarousel" class="carousel" style="margin-bottom:20px">
  <!-- Carousel indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="item">
      <img src="slide-01.jpg" />
    </div>
    <div class="item">
      <img src="slide-01.jpg" />
    </div>
    <div class="item">
      <img src="slide-01.jpg" />
    </div>
  </div>
  <!-- Carousel Controls -->
  <a class="carousel-control left"  href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

在轮番底部中间位置的小圆圈是轮番指示器,白色背景的圆圈指示当前活动的条目。用户可以点击任意的小圆圈,让它成为当前活动的条目。效果如图 4‑20所示:

轮番
图4-20 轮番

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验