Bootstrap3 轮番插件的调用方式
轮番插件的调用方式
1、JavaScript调用
JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可。格式为:
$('.carousel').carousel();
除此之外,Bootstrap还提供了其它一些方法,可以根据需要选择使用。这些方法为:
- .carousel('cycle'):从左向右循环播放。
- .carousel('pause'):暂停循环播放。
- .carousel(number):循环到指定帧(下标从0开始,类似数组)。
- .carousel('prev'):返回到上一帧。
- .carousel('next'):播放下一帧。
比如,在上面的示例中,通过JavaScript调用,虽然轮番可以自动播放,但两个控制按钮还无法正常工作。此时,就可以调用 carousel("prev") 和 carousel("next") 方法,来实现交互功能。代码如下:
<script>
$('.carousel').carousel(({
interval: 2000
});
$('.carousel a.left').click(function(){
$('.carousel').carousel("prev");
});
$('.carousel a.right').click(function(){
$('.carousel').carousel("next");
});
</script>
2、data 属性调用
如果不想编写JavaScript代码,就可以使用 data 属性来调用轮番插件,并实现与轮番插件的交互功能。
轮番插件需要两个交互功能:一个是点击控制按钮进行切换,一个是点击轮番指示器的小圆点进行切换。
如果希望用户点击控制按钮进行切换,只需为左侧按钮提供 data-slide="prev" 属性,为右侧按钮提供 data-slide="next" 属性即可。如:
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
如果希望用户点击轮番指示器的小圆点进行切换,需要为轮番指示器的 <li> 元素提供 data-target 和 data-slide-to 属性。data-target 属性的值为轮番包含框的 id,data-slide-to 属性的值为点击小圆圈后,要切换到的轮番条目的索引,即 class="item" 元素的索引,索引从 0 开始。如:
<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>
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap3 轮番插件的调用方式相关推荐
- Bootstrap3 折叠插件的调用方式
折叠插件的调用方式 折叠插件的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用 要激活折叠插件的激活行为,首先为标题部分的链接定义 ...
- Bootstrap 轮番插件Collapse 调用方式
调用方式 1.JavaScript调用 JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可.格式为: $('.carousel').carousel(); Boo ...
- Bootstrap3 滚动监听插件的调用方式
滚动监听插件的调用方式 无论何种实现方式,滚动监听都需要被监听的组件是position: relative;即相对定位方式.大多数时候是监听<body>元素. 1.data属性调用 只需给 ...
- Bootstrap3 插件的调用方式
插件的调用方式 Bootstrap的所有插件都支持两种调用方式:一种是 data 属性API调用,一种是JavaScript API调用.可以根据需要选择任意一种调用方式. 1.data属性API调用 ...
- Bootstrap3轮番插件的选项
轮番插件的选项 Bootstrap为轮番插件提供了 4 个选项,这些选项都可以通过 data 属性或JavaScript进行设置.选项的详细说明见表 4‑11: 表 4‑11 carousel插件的选 ...
- Bootstrap3 模态对话框的调用方式
模态对话框的调用方式 可以通过 data 属性或 JavaScript,让模态框动态显示或隐藏.Bootstrap会为<body>元素添加.modal-open类来覆盖页面默认的滚动行为, ...
- Bootstrap 折叠插件Collapse 调用方式
调用方式 Bootstrap折叠插件Collapse的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用 要激活折叠插件的激活行为,首 ...
- Bootstrap3 轮番插件的事件
轮番插件的事件 Bootstrap为轮番插件定义了两个事件,通过这些事件,可以监听播放行为及轮番组件的状态.这些事件及含义见表 4‑12. 表 4‑12 轮番插件的事件及含义 事件 含义 slide. ...
- Bootstrap3 轮番插件的使用方法
轮番 Bootstrap 的轮番插件(carousel.js)是一个灵活的.响应式的.无缝循环播放的幻灯片切换插件,它的内容可以是图片.视频.或者其他任何内容. 使用方法 Bootstrap中的轮番由 ...
最新文章
- 用Python分析北上广深租房情况,租房时优先考虑哪些因素?
- 如何解决Asp.Net MVC和WebAPI的Controller名称不能相同的问题
- Android动画原理
- 'parent.relativePath' points at no local POM
- delphi tclientsocket接收不到返回数据_NB-IOT联网及模块UDP数据传输过程
- QEMU+GDB调试方法
- No package ‘libmatekbd‘ found
- ic启动器怎么导入模组_icmod模组管理器最新版下载-ICMOD管理器(Inner Core)下载v1.5-阵 安卓版-西西软件下载...
- Linux深度学习框架安装
- G盘格式化了,要怎样恢复文件
- 谷歌gmail注册入口_如何阻止Gmail将事件添加到Google日历
- 运营简史:一文读懂互联网运营的20年发展与演变
- excel表格数据汇总计数如何完成?
- 关于@NotNull和@NotBlank的问题
- 【老板须知】实施ERP系统能为公司带来什么样的好处
- c语言谷歌的招聘题目扣分,google的环环相扣招聘试题
- 华软java综合实验二_2018-2019-2 20175311 实验二 《Java开发环境的熟悉》实验报告
- Latex中三线表制作
- 如何显示密件抄送人员地址_发送电子邮件时,抄送和密件抄送有什么区别?
- Ubuntu安装HP1018