Bootstrap实战--轮播图

搭建

进度指示器

<div id="homepage-feature" class="carousel slide " data-ride="carousel">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
<li data-target="#homepage-feature" data-slide-to="1"></li>
<li data-target="#homepage-feature" data-slide-to="2"></li>
<li data-target="#homepage-feature" data-slide-to="3"></li>
</ol>

解析：

整个传送带是一个ID属性

id="homepage-feature"

的

div

标签，其中

carousel

类用于把传送带CSS应用到这个元素，为指示器、传送带项和前一张以及后一张空间添加样式。

进度指示器的

data-target

必须使用传送带的ID属性，这里是

id="homepage-feature

。有了这个属性，JavaScript插件才能为活动的传送带项添加

active

类。之后类的切换就交给JavaScript控制，它会删除第一个指示器的这个类，再添加到后续指示器，如此循环。

data-slide-to

像编程语言一样从0开始。

传送带项

<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="img/okwu.jpg" alt="OKWU.edu Homepage">
</div>
<div class="item">
<img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage">
</div>
<div class="item">
<img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation">
</div>
<div class="item">
<img src="img/emancipation.jpg" alt="Emancipation Stories">
</div>
</div>

每个传送带后面，是类

carousel-inner

的元素。元素是所有传送带的项（item），就是图片。

传送带控件

<!-- 轮播（Carousel）导航 -->
<a class="left carousel-control" href="#homepage-feature" role="button" data-slide="prev">
<span class="icon fa fa-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#homepage-feature" role="button" data-slide="next">
<span class="icon fa fa-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

用于在传送带两侧显示前一个、后一个按钮，对应着

Glyphicon

字体图标。

轮播时间的调整

通过修改js/main.js

添加以下代码：

$(document).ready(function(){
$('.carousel').carousel({
interval:8000
});
});

可将轮播时间调整为8秒。