搭建
进度指示器
<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秒。