您的位置：首页 > Web前端 > BootStrap

Bootstrap 历练实例-轮播(carousel)插件方法

2015-12-01 14:19 696 查看

方法

下面是一些轮播（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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航