<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap轮播图</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<!--data-ride="carousel" 自动轮播-->
<div id="myCarousel" class="carousel slide" style="width: 700px">
<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="image/slide1.png" alt="第一张">
</div>
<div class="item">
<img src="image/slide2.png" alt="第二张">
</div>
<div class="item">
<img src="image/slide3.png" alt="第三张">
</div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control
left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control
right">›</a>
</div>
<button id="cycle" class="btn btn-default">开始</button>
<button id="pause" class="btn btn-default">停止</button>
<button id="number" class="btn btn-default">播放第三条</button>
<button id="prev" class="btn btn-default">上一个</button>
<button id="next" class="btn btn-default">下一个</button>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
// $('#myCarousel').carousel({
// //设置自动播放/2 秒
// interval : 2000,
// //设置暂停按钮的事件
// pause : 'hover',
// //只播一次
// //wrap : false,
// })
$('#cycle').on('click', function () {
$('#myCarousel').carousel('cycle');
});
$('#pause').on('click', function () {
$('#myCarousel').carousel('pause');
});
$('#number').on('click', function () {
$('#myCarousel').carousel(2);
});
$('#prev').on('click', function () {
$('#myCarousel').carousel('prev');
});
$('#next').on('click', function () {
$('#myCarousel').carousel('next');
});
$('#myCarousel').on('slide.bs.carousel', function () {
alert('执行之前调用');
});
$('#myCarousel').on('slid.bs.carousel', function () {
alert('执行完毕后调用');
});
</script>
</html>
06-05
8251
8251
09-15
824
824
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
