<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/Chrysanthemum.jpg" />
<div class="carousel-caption">
文本1
</div>
</div>
<div class="item">
<img src="images/Lighthouse.jpg" />
<div class="carousel-caption">
文本2
</div>
</div>
<div class="item">
<img src="images/Penguins.jpg" />
<div class="carousel-caption">
文本3
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
.carousel-indicators 定义小圆点
.carousel 将插件整和起来
.slide 过渡效果
data-ride="carousel" 自动轮播
.carousel-inner .item 定义图片列表样式
.carousel-caption 添加内容
data-slide="prev" 跳到上一张
data-slide="next" 跳到下一张data-slide-to="index" 移动到指定索引
通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。
属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播床底一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。
data-interval="num" 轮播图切换时间
data-pause="hover" 鼠标移入时停止轮播
data-wrap="true" 无限循环
data-keyboard="true"
可以在图片切换时,绑定一些事件
$("#qq").on("slid.bs.carousel",function(){
alert("需要执行的代码")
})