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 浏览器检测代码精简版
Mar 04 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
package.json配置文件构成详解
Aug 27 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 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
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
jquery each()源代码
2011/02/14 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
浅谈js script标签中的预解析
2016/12/30 Javascript
如何使用angularJs
2017/05/08 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
2014年高考决心书
2014/03/11 职场文书
教室标语大全
2014/06/21 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
Java版 单机五子棋
2022/05/04 Java/Android