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 loading加载效果实现代码
Nov 24 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
React Component存在的几种形式详解
Nov 06 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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
php二分法在IP地址查询中的应用
2008/08/12 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
JS 继承实例分析
2008/11/04 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Python创建日历实例
2014/08/21 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
python list转置和前后反转的例子
2019/08/26 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
广告业务员岗位职责
2014/02/06 职场文书
人事部岗位职责范本
2014/03/05 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
雷锋电影观后感
2015/06/10 职场文书
培根随笔读书笔记
2015/07/01 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python