8.11.4 轮播图事件
Bootstrap
为轮播图提供了如下两个事件。
事件 |
描述 |
slide.bs.carousel |
当轮播图开始切换图片时触发该事件。 |
slid.bs.carousel |
当轮播图切换图片完成时触发该事件,也就是CSS 过渡动画执行完成时触发该事件。 |
## 程序示例 ## |
|
例如我们在前面的carousel-data.html 页面的后面添加如下JS脚本。 |
|
1 2 3 4 5 6 7 8
| <script type="text/javascript"> $('#myCarousel').on('slide.bs.carousel', function () { console.log("轮播图的图片开始切换"); }).on('slid.bs.carousel', function () { console.log("轮播图的图片切换完成"); }) </script>
|
|
|
这段代码为轮播图的两个事件都绑定了事件处理函数,因此无论图片开始切换,还是图片切换完成都会触发相应的事件。
完整代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
| <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 轮播图 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </head>
<body> <div class="container"> <div id="myCarousel" class="carousel" data-ride="carousel" data-interval="1000" data-pause='hover'> <ul class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#myCarousel"></li> <li data-slide-to="1" data-target="#myCarousel"></li> <li data-slide-to="2" data-target="#myCarousel"></li> <li data-slide-to="3" data-target="#myCarousel"></li> </ul> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/lijiang.jpg" alt="漓江"> <div class="carousel-caption"> <h4>漓江</h4> <div>漓江风光有山青、水秀、洞奇、石美“四胜”之誉。从桂林至阳朔的83公里漓江河段,集中了桂林山水的精华,令人有“舟行碧波上,人在画中游”之感。</div> </div> </div> <div class="item"> <img src="images/shuangta.jpg" alt="双塔"> <div class="carousel-caption"> <h4>金银双塔</h4> <div>金银双塔白天和夜晚晚会呈现出截然不同的美景,白天让人觉得庄严、肃穆,而当夜幕降临,在灯光的映照下,则给人以亲切温馨的感觉。</div> </div> </div> <div class="item"> <img src="images/qiao.jpg" alt="桥"> </div> <div class="item"> <img src="images/xiangbi.jpg" alt="象鼻山"> </div> </div> <a class="left carousel-control" role="button" data-slide="prev" href="#myCarousel"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" role="button" data-slide="next" href="#myCarousel"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <script type="text/javascript"> $('#myCarousel').on('slide.bs.carousel', function () { console.log("轮播图的图片开始切换"); }).on('slid.bs.carousel', function () { console.log("轮播图的图片切换完成"); }) </script> </body>
</html>
|
原文链接: 8.11.4 轮播图事件