<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!--bootstrap要引入的文件：bootstrap.min.css,jquery.min.js,bootrap.min.js--> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <!--要在bootstrap之前引入jquery,bootstrap依赖JQUERY,因为bootstrapJS里要使用$这个jquery变量--> <!--<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>--> <!--如果你要用bootstrap使用一些提示性的交互，那么就需要引入提示性的框架popper.js,因为bootstrap的提示就是依赖popper--> <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style=" 400px;"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="img/logo.82b9c7a5.png" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="img/logo.82b9c7a5.png" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="img/logo.82b9c7a5.png" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script type="text/javascript"> $('#carouselExampleIndicators').on('slide.bs.carousel', function () { console.log(123) console.log('滚动之前执行的函数') }).on('slid.bs.carousel',function(){ console.log('滚动之后执行的函数') }) </script> </body> </html>