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 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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
PHP的FTP学习(二)
2006/10/09 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python日期的加减等操作的示例
2017/08/15 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
详解Python locals()的陷阱
2019/03/26 Python
django表单的Widgets使用详解
2019/07/22 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
软件工程师面试题
2012/06/25 面试题
写好自荐信的要点
2013/11/06 职场文书
技术总监岗位职责
2013/12/05 职场文书
高校自主招生自荐信
2013/12/09 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
最常使用的求职信
2014/05/25 职场文书
医德医魂心得体会
2014/09/11 职场文书
十八大宣传标语
2014/10/09 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android