Bootstrap 历练实例-轮播(carousel)插件方法
方法
下面是一些轮播（Carousel）插件中有用的方法：
| 方法 | 描述 | 实例 |
|---|---|---|
| .carousel(options) | 初始化轮播为可选的 options 对象，并开始循环项目。 |
$('#identifier').carousel({
interval: 2000
})
|
| .carousel('cycle') | 从左到右循环轮播项目。 |
$('#identifier').carousel('cycle')
|
| .carousel('pause') | 停止轮播循环项目。 |
$('#identifier')..carousel('pause')
|
| .carousel(number) | 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 |
$('#identifier').carousel(number)
|
| .carousel('prev') | 循环轮播到上一个项目。 |
$('#identifier').carousel('prev')
|
| .carousel('next') | 循环轮播到下一个项目。 |
$('#identifier').carousel('next')
|
实例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap 历练实例-轮播(carousel)插件方法</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<div class="carousel slide"id="myCarousel">
<!--轮播(carousel)指针-->
<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>
<!--轮播(carousel)项目-->
<div class="carousel-inner">
<div class="item active">
<img src="Images/slide1.png"alt="First slide" />
</div>
<div class="item">
<img src="Images/slide2.png"alt="Second slide" />
</div>
<div class="item">
<img src="Images/slide3.png" />
</div>
</div>
<!--轮播(Carousel)导航-->
<a href="#myCarousel"class="carousel-control left"data-slide="prev">‹</a>
<a href="#myCarousel"class="carousel-control right"data-slide="next">›</a>
</div>
<!--控制按钮-->
<div style="text-align:center">
<input type="button"class="btn start-slide"value="start" />
<input type="button"class="btn pause-slide"value="pause" />
<input type="button"class="btn prev-slide" value="prev"/>
<input type="button"class="btn next-slide"value="next" />
<input type="button"class="btn slide-one"value="slideOne" />
<input type="button"class="btn slide-two"value="slideTwo" />
<input type="button"class="btn slide-three"value="slideThree" />
</div>
</div>
<script>
$(document).ready(function () {
$(".start-slide").click(function () {
$("#myCarousel").carousel("cycle");
});
$(".pause-slide").click(function () {
$("#myCarousel").carousel("pause")
});
$(".prev-slide").click(function () {
$("#myCarousel").carousel("prev")
});
$(".next-slide").click(function () {
$("#myCarousel").carousel("next")
});
$(".slide-one").click(function () {
$("#myCarousel").carousel(0)
});
$(".slide-two").click(function () {
$("#myCarousel").carousel(1)
});
$(".slide-three").click(function () {
$("#myCarousel").carousel(2)
});
})
</script>
</body>
</html>
