BootStrap的JS插件之轮播效果案例详解


Posted in Javascript onMay 16, 2016

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

案例

下面展示的就是此插件和相关组件制作的轮播案例。

BootStrap的JS插件之轮播效果案例详解

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

Internet Explorer 8 & 9不支持过渡动画效果

Bootstrap基于CSS3实现动画效果,但是Internet Explorer 8 & 9不支持这些必要的CSS属性。因此,使用这两种浏览器时将会丢失过渡动画效果。而且,我们并不打算使用基于jQuery实现替代功能。

可选选项

在任何.item中均可以通过添加.carousel-caption从而为每帧幻灯片添加说明文字。也可以添加任何HTML代码,这些HTML代码将会被自动排列和格式化。

900x500

<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>

可访问性问题

轮播组件并不兼容可访问性标准。如果需要兼容,请考虑其他展示幻灯片的方案。

用法

通过data属性

通过data属性可以很容易的控制轮播的定位。data-slide可以接受控制播放位置的prev或next关键字。另外,还可以通过data-slide-to传递以0开始的幻灯片下标。

data-ride="carousel"属性用来标记在页面加载之后即开始启动的轮播组件。

通过JavaScript

手动启动轮播组件:

$('.carousel').carousel()

选项

可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如data-interval=""。

名称 类型 默认值 描述
interval number 5000 幻灯片轮换的等待时间。如果为false,轮播将不会自动开始循环。
pause string "hover" 鼠标停留在幻灯片区域即暂停轮播,鼠标离开即启动轮播。
wrap boolean true 轮播是否持续循环。

方法

.carousel(options)

初始化轮播组件,接受一个可选的object类型的options参数,并开始幻灯片循环。

$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')

从左到右循环各帧。

.carousel('pause')

停止轮播。

.carousel(number)

将轮播定位到指定的帧上(帧下标以0开始,类似数组)。

.carousel('prev')

返回到上一帧。

.carousel('next')

转到下一帧。

事件

Bootstrap的轮播组件暴露了两个事件用于监听。

事件类型 描述
slide.bs.carousel 此事件在slide方法被调用之后立即出发。
slid.bs.carousel 当所有幻灯片播放完之后被触发。
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
})

以上所述是小编给大家介绍的基于JS插件制作BootStrap轮播效果案例详解的相关知识,希望能够帮助到大家!

Javascript 相关文章推荐
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
老司机带你解读jQuery插件开发流程
May 16 #Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 #Javascript
jQuery插件制作的实例教程
May 16 #Javascript
总结jQuery插件开发中的一些要点
May 16 #Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 #Javascript
动态的9*9乘法表效果的实现代码
May 16 #Javascript
Svg.js实例教程及使用手册详解(一)
May 16 #Javascript
You might like
星际争霸兵种名称对照表
2020/03/04 星际争霸
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
进一步理解Python中的函数编程
2015/04/13 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python管理Windows服务小脚本
2018/03/12 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python用input输入列表的实例代码
2020/02/07 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
工业设计专业推荐信
2013/10/29 职场文书
商场租赁意向书
2014/07/30 职场文书
2014年审计工作总结
2014/11/17 职场文书
接收函
2019/04/22 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python