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 相关文章推荐
javascript解析json数据的3种方式
May 08 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
老司机带你解读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
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
PHP实现文件上传与下载
2020/08/28 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python使用itchat实现手机控制电脑
2018/02/22 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
如何基于python测量代码运行时间
2019/12/25 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
2014年个人教学工作总结
2014/12/09 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
导游词之桂林山水
2019/09/20 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python