<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--引入boorstrap的css文件-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--在引入bootstrap的js文件之前 引入jquery文件，因为bootstrap是依赖于jquery的 -->
<script src="jquery-1.11.2.min.js"></script>
<!--引入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<title>carousel轮播效果</title>
<script>
/**
* 幻灯播放效果的选项
*/
$(function () {
$(".carousel").carousel({
interval:3000, //设置轮播切换速度
keyboard:true, //设置是否启用鼠标控制图片轮播切换
pause:"hover", //鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap:true //设置是否循环播放
});
});
/**
*以下是一些常用的方法
*/
$(function () {
//开始轮播
$("#start").click(function() {
$("#carousel-example-generic").carousel('cycle');
});
//暂停播放
$("#pause").click(function() {
$("#carousel-example-generic").carousel('pause');
});
//上一张
$("#prev").click(function() {
$("#carousel-example-generic").carousel('prev');
});
//下一张
$("#prev").click(function() {
$("#carousel-example-generic").carousel('next');
});
//跳至第三张（下标从0开始）
$("#toThree").click(function() {
$("#carousel-example-generic").carousel(2);
});
});
</script>
</head>
<body>
<!--data-ride="carousel"属性用于控制是否在页面加载时就开始播放动画 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
<!--
轮播的指标（下方的小圆点）
使用 data-slide-to 来向轮播床底一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- 轮播的项目，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 -->
<div class="carousel-inner" role="listbox">
<!--class=item属性的div中一定要有一个div的class属性为active，不然轮播项目不可见 -->
<div class="item active">
<img src="data:images/pic1.png" alt="..." style="width: 100%;height: 500px;">
<!--下面的div中可以放置任何我们想放置的内容 -->
<div class="carousel-caption">
<h1>First slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>
<div class="item">
<img src="data:images/pic2.png" alt="..." style="width: 100%;height: 500px;">
<div class="carousel-caption">
<h1>Second slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>
<div class="item">
<img src="data:images/pic3.png" alt="..." style="width: 100%;height: 500px;">
<div class="carousel-caption">
<h1>Third slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>
<div class="item">
<img src="data:images/pic4.png" alt="..." style="width: 100%;height: 500px;">
<div class="carousel-caption">
<h1>Fourth slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>
</div>
<!--
轮播的控制导航
data-slide：接受prev、next关键字，用于控制幻灯片相对于当前的位置
-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--控制按钮 -->
<div style="text-align: center;">
<input type="button" class="btn btn-default" id="start" value="开始"/>
<input type="button" class="btn btn-default" id="pause" value="暂停"/>
<input type="button" class="btn btn-default" id="prev" value="上一个"/>
<input type="button" class="btn btn-default" id="next" value="下一个"/>
<input type="button" class="btn btn-default" id="toThree" value="跳至第三个"/>
</div>
</body>
</html>
效果图：
