轮播(Carousel)插件事件

2017-07-12 10:51:00
admin
原创
304
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 轮播(Carousel)插件事件</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
    <!-- 轮播(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="http://www.ybao.org/data/upload/201707/f_4d7798edf527fdd90920a05a13967c0f.png" alt="First slide">
  </div>
  <div class="item">
   <img src="http://www.ybao.org/data/upload/201707/f_68037bb9392465433e129a4d99d17ef9.png" alt="Second slide">
  </div>
  <div class="item">
   <img src="http://www.ybao.org/data/upload/201707/f_ad71f796499cf0fa69bd467c665a2daf.png" alt="Third slide">
  </div>    </div>
    <!-- 轮播(Carousel)导航 -->
    <a class="carousel-control left" href="#myCarousel" 
        data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" 
        data-slide="next">&rsaquo;</a>
</div> 
<script>
$(function(){
    $('#myCarousel').on('slide.bs.carousel', function () {
        alert("当调用 slide 实例方法时立即触发该事件。");
    });
});
</script>

</body>
</html>				
				

文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227