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秒。