2.5 案例实训2——设计网页轮播组件

轮播是页面中使用频率比较高的组件之一，要使用Bootstrap设计基本组件，需要满足两个条件。

■ 正确设计最基本的HTML结构。

■ 需要Bootstrap中的jQuery插件提供支持。

下面的示例演示如何设计一个简单的轮播效果，如图2-8所示。

图2-8 应用轮播组件

利用前面一节介绍的方法完成页面基本结构创建，然后在页面中添加如下的轮播结构：

完成上面代码即可实现轮播效果，具体说明如下。

在上面的结构中，carousel类定义轮播包含框，carousel-indicators类定义轮播指示器包含框，carousel-inner类定义轮播图片包含框，carousel-caption类定义轮播图的标题和说明，carousel-control-prev类和carousel-control-next类定义两个控制按钮，用来控制播放行为。

其中data-ride="carousel"属性用于定义轮播在页面加载时就开始动画播放，data-slide="prev"和data-slide="next"属性用于激活按钮行为，active类定义轮播的活动项，slide类定义动画效果。

在指示器包含框中，data-target="#Carousel"属性指定目标包含容器为<div id="Carousel">，使用data-slide-to="0"定义播放顺序的下标。

在轮播图片包含框中，carousel-item类定义轮播项包含框，carousel-caption类定义标题和说明包含框。其中图片引用了.d-block和.w-100样式，以修正浏览器预设的图像对齐带来的影响。

控制按钮和指示图标必须具有与.carousel元素的id（Carousel）匹配的数据目标属性或链接的href属性。