Bootstrap 历练实例-轮播(carousel)插件的事件
事件
下表列出了轮播(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">‹</a>
<a href="#myCarousel"class="carousel-control right"data-slide="next">›</a>
</div>
</div>
<script>
$(document).ready(function () {
$("#myCarousel").on("slide.bs.carousel", function () {
alert("Hello ,您调用了slide方法触发了该事件。")
})
})
</script>
</body>
</html>
Bootstrap 历练实例-轮播(carousel)插件的事件的更多相关文章
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- Bootstrap 轮播(Carousel)插件
轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...
- Bootstrap历练实例:按钮(Button)插件单个切换
单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...
- Bootstrap历练实例:弹出框(popover)事件
事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...
- bootstrap 学习笔记 轮播(Carousel)插件
Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容. 示例: 下面是不念 ...
- Bootstrap历练实例:轮播(carousel)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 第124天:移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- thinkphp标签实现bootsrtap轮播carousel实例
thinkphp标签实现bootsrtap轮播carousel实例由于轮播carousel第一个div需要设置active样式才能正常显示,上面的圆点也同样需要数字,使用volist标签在循环的同时可 ...
- Bootstrap 历练实例 - 折叠(Collapse)插件事件
事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...
随机推荐
- MacOS下,Python2和Python3完美兼容使用(转)
问题阐述: MacOS默认Python版本是2.7.10,随着Python3的进一步占有市场,Python2.7也将在2020年结束维护,所以在同一台电脑上安装多个Python版本势在必行. 一.py ...
- iphone手机QQ浏览器到底部继续上滑出现黑色背景盖住position:fixed的页面元素的问题
真的是试了网上很多种都不行, 最后我html{overflow-x:hidden;}加了这个,去掉就可以了~删除html{overflow-x:hidden;} body{overflow-x:hid ...
- Ubuntu16.04双网卡绑定
服务器经常有多个网卡,为了保证网络冗余性,一个网卡出现故障时,不导致网络服务中断,可以懂多网卡网卡绑定来解决此问题. 环境: 系统:Ubuntu16.04 网卡:em1 em2 ip:192.168. ...
- PHP 获取acm近期比赛
<?php // author: Moore Jiang. ini_set('display_errors',1); //错误信息 ini_set('display_startup_errors ...
- strcpy、strncpy、strlen、memcpy、memset、strcat、strncat、strcmp、strncmp,strchr
1.strcpy #include<stdio.h> #include<assert.h> char *mystrcpy(char *dest, const char *src ...
- AD按键-矩阵按键-独立按键:
原理:利用数组分压+AD采集: 优点:一个IO口可以做成多个按键,节省IO口(矩阵键盘在>4时优点才能体现出来):可备用作为AD基准输入. 缺点:不能做成组合按键(或者电阻要精确选择):且离IO ...
- Java面向对象_包装类访问修饰符
在java中有一个设计的原则"一切皆对象",java中的基本数据类型就完全不符合这种设计思想,因为八种基本数据类型并不是引用数据类型,所以java中为了解决这样的问题,jdk1.5 ...
- Linux网络管理命令ifdown/ifup与ifconfig/ip中的down/up命令的对比
参考了:https://blog.csdn.net/GDUTLYP/article/details/50498202 以下网卡均采用eth1说明. 相同点——[启用]和[禁止]网卡 ifdown et ...
- .net 记录
Stack Overflow 2016最新架构探秘 http://www.infoq.com/cn/news/2016/03/Stack-Overflow-architecture-insi#rd N ...
- Oracle视图,索引,序列
什么是视图[View] (1)视图是一种虚表 (2)视图建立在已有表的基础上, 视图赖以建立的这些表称为基表(3)向视图提供数据内容的语句为 SELECT 语句,可以将视图理解为存储起来的 SELEC ...