JS组件Bootstrap实现图片轮播效果


Posted in Javascript onMay 16, 2016

本文主要来学习一下JavaScript插件--轮播。废话不多说,直接进入学习。完整教程可查看:Bootstrap3.0教程

轮播

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

JS组件Bootstrap实现图片轮播效果

<body style="width:900px; margin-left:auto; margin-right:auto;">

<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" style="text-align:center">

<div class="item active">

<img >

</img>

</div>

<div class="item">

<img >

</img>

</div>

<div class="item">

<img >

</img>

</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>

<script src="js/jquery-2.0.3.min.js">

</script>

<script src="js/bootstrap.min.js">

</script>

<script type="text/javascript">

//$('.carousel').carousel('next');

</script>

</body>

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

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

可选选项

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

<div class="item active">

<img >

</img>

<div class="carousel-caption">

<h4>First Thumbnail label</h4>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>

</div>

为三个项,分别加上,然后效果就有了额。

JS组件Bootstrap实现图片轮播效果

可访问性问题

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

用法 通过data属性

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

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

JS组件Bootstrap实现图片轮播效果

在最外层的轮播容器中添加即可

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

通过JavaScript

手动启动轮播组件(上面我们通过使用data-ride属性进行自动开启轮播组件。):

$('.carousel').carousel()

选项

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

JS组件Bootstrap实现图片轮播效果

方法

$("").carousel(options)

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

$('.carousel').carousel({

interval: 2000

})

.carousel('cycle')   从左到右循环各帧。

.carousel('pause')  停止轮播。

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

.carousel('prev')  返回到上一帧。

.carousel('next') 转到下一帧。

事件

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

JS组件Bootstrap实现图片轮播效果

$('#carousel-example-generic').on('slide.bs.carousel', function ()

{

alert(1);

})

就这样为轮播组件绑定事件,然后在相应的运行时就会执行的。这个在之前的JavaScript插件中讲解的也比较多,形式都是通用的,所以只要会用就可以了。

图片

这是几个比较实用的图片轮播插件,效果很不错,合理的使用,总会给你的页面加分的,希望对大家的学习有所帮助。

如果还不过瘾的话大家可以查看这些文章进行深入学习: 《Bootstrap学习教程》小编和大家共同进步!

如果大家还想深入学习,可以点击这里进行学习,再为大家附2个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
如何编写高质量JS代码
Dec 28 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 #Javascript
JS获取元素多层嵌套思路详解
May 16 #Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 #Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 #Javascript
在javascript中创建对象的各种模式解析
May 16 #Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 #Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 #Javascript
You might like
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Django的models中on_delete参数详解
2019/07/16 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
利用python实现AR教程
2019/11/20 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
输入N,打印N*N矩阵
2012/02/20 面试题
三年级语文教学反思
2014/02/01 职场文书
期末学生评语大全
2014/04/24 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
市级三好学生评语
2014/12/29 职场文书
禁毒心得体会范文
2016/01/15 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server