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 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
Node.js模块加载详解
Aug 16 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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
php db类库进行数据库操作
2009/03/19 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python中的Numpy入门教程
2014/04/26 Python
Python yield 使用方法浅析
2017/05/20 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
Django开发中的日志输出的方法
2018/07/02 Python
Django继承自带user表并重写的例子
2019/11/18 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
会展中心部门工作职责
2013/11/27 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
司机岗位职责范本
2015/04/10 职场文书
离婚财产分割协议书
2015/08/11 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL