事件

下表列出了轮播（Carousel）插件中要用到的事件。这些事件可在函数中当钩子使用。

事件 描述 实例
slide.bs.carousel 当调用 slide 实例方法时立即触发该事件。 
$('#identifier').on('slide.bs.carousel', function () {

  // 执行一些动作...

})
slid.bs.carousel 当轮播完成幻灯片过渡效果时触发该事件。 
$('#identifier').on('slid.bs.carousel', function () {

  // 执行一些动作...

})

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap 历练实例-轮播(carousel)插件的事件</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<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="Images/slide1.png" alt="First slide"/>
</div>
<div class="item">
<img src="Images/slide2.png" alt="Second slide" />
</div>
<div class="item">
<img src="Images/slide3.png" alt="Three slide" />
</div>
</div>
<a href="#myCarousel"class="carousel-control left"data-slide="prev">&lsaquo;</a>
<a href="#myCarousel"class="carousel-control right"data-slide="next">&rsaquo;</a>
</div>
</div>
<script>
$(document).ready(function () {
$("#myCarousel").on("slide.bs.carousel", function () {
alert("Hello ,您调用了slide方法触发了该事件。")
})
})
</script>
</body>
</html>

Bootstrap 历练实例-轮播(carousel)插件的事件的更多相关文章

  1. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  2. Bootstrap 轮播(Carousel)插件

    轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...

  3. Bootstrap历练实例：按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  4. Bootstrap历练实例：弹出框(popover)事件

    事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...

  5. bootstrap 学习笔记 轮播（Carousel）插件

    Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容. 示例: 下面是不念 ...

  6. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  8. thinkphp标签实现bootsrtap轮播carousel实例

    thinkphp标签实现bootsrtap轮播carousel实例由于轮播carousel第一个div需要设置active样式才能正常显示,上面的圆点也同样需要数字,使用volist标签在循环的同时可 ...

  9. Bootstrap 历练实例 - 折叠（Collapse）插件事件

    事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...

随机推荐

  1. layui的tree和form并没有冲突！无限级tree下拉列表和select下拉列表同一页使用！

    在昨天写的随笔中: layui的tree和form同时引用出现冲突的粗略解决办法 https://www.cnblogs.com/xwma/p/10900975.html 提出有冲突,今天在开发中发现 ...

  2. 洛谷P1505 [国家集训队]旅游

    题目描述 \(Ray\) 乐忠于旅游,这次他来到了\(T\) 城.\(T\) 城是一个水上城市,一共有 \(N\) 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,\(T ...

  3. java基础---GC

    一.Java基础: GC即:garbage collection垃圾回收机制.Java是自动回收垃圾的,像c c++等语言没有自动垃圾回收机制,长时间开启服务器就会导致 内存泄漏,占用内存 Java的 ...

  4. JQuery的extend扩展方法

    jQuery.extend 函数使用详解   JQuery的extend扩展方法:      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去 ...

  5. 设计模式——单例模式(Singleton)

    保证一个类仅有一个实例,并提供一个访问它的全局访问点.——DP UML类图 模式说明 个人认为单例模式是所有设计模式中最为简单的一个模式,因为实现这个模式仅需一个类,而不像其他模式需要若干个类.这个模 ...

  6. 关于jetty的那些奇葩问题

    Jetty的解压目录并不像Tomcat那样直接是在webapps下,如果你什么都不做修改的话,Ubuntu14.04下Jetty的默认解压目录是/var/cache/jetty/data/下: 比如我 ...

  7. placeholder设置默认显示

    <textarea rows="4" cols="50" placeholder="请在此处介绍自己..."> </tex ...

  8. CheatEngine-内存修改

    0.备注+待完成 //备注 a). 如果有方括号,就是说CE认为找 到了数值的指针了 //待完成 a). 自动导出外挂 b). 菜单栏中"表单"下的lua是做什么用的 c). CE ...

  9. 3 - EventLoop和线程模型-事件循环

    a). EventLoopGroup为每个新创建的channel分配一个EventLoop,多个channel对应一个EventLoop. b). 一个EventLoop由一个不变的thread驱动, ...

  10. 3年，阅读量100万+, Github Star 15000+

    这两天突然发现,三年前在博客园写的一篇文章阅读量超过百万了,对,还是技术文章.这个让我蛮惊讶的,当时刚开始写这篇文章的时候,一周的阅读量也才两三千,随着时间慢慢的过去,在搜索引擎的加持下竟然超过了百万 ...