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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 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入库和出库
2013/06/25 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
python中正则的使用指南
2016/12/04 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
《鱼游到了纸上》教学反思
2014/02/20 职场文书
珍惜资源的建议书
2014/08/26 职场文书
尊师重教演讲稿
2014/09/04 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
公务员年度个人总结
2015/02/12 职场文书
网络舆情信息简报
2015/07/21 职场文书
运动会5000米加油稿
2015/07/21 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书