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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 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
PHP4中session登录页面的应用
2008/07/25 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
CCPry JS类库 代码
2009/10/30 Javascript
Js获取事件对象代码
2010/08/05 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
国际经济贸易专业推荐信
2013/11/06 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
小学生新年寄语
2014/04/03 职场文书
校车安全责任书
2014/08/25 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS