Bootstrap图片轮播

来源:互联网 发布:手机搭建php 编辑:程序博客网 时间:2024/05/01 04:29

1 搭建传送带
2 传送带项(即图片)
3传送带控件(左右两侧按钮)
轮播代码就分为这三部分。要注意在第二部分中,只有第一项div中class是“item active” 其他都是”item”不然就会出现图片全部显示出来并且自上而下排列的情况。
注意:这里的播放速度是默认的。
这里写图片描述

代码再复制一遍:


<div id="homepage-feature" class="carousel slide">
<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>
<!-- Wrapper for slides -->
<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-->
<!-- Controls -->
<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#homepage-feature" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--/#homepage-feature.carousel-->

1 0