<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1"> <link href=""> <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src=""></script> <title>事件</title> </head> <body> <div> <div> <!--幻灯片切换指标--> <ol> <li data-toggle="#myCarouel" data-slide-to="0"></li> <li data-toggle="#myCarouel" data-slide-to="1"></li> <li data-toggle="#myCarouel" data-slide-to="2"></li> </ol> <!--幻灯片项目--> <div> <div> <img src="" alt="项目1"> </div> <div> <img src="" alt="项目2"> </div> <div> <img src="" alt="项目3"> </div> </div> <!--幻灯片导航--> <a href="#myCarouel" data-slide="prev"><<<</a> <a href="#myCarouel" data-slide="next">>>></a> </div> </div> <script> $(function () { $("#myCarouel").on('slide.bs.carousel',function () { alert('切换幻灯'); }); }) </script> </body> </html>
效果如下：
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：