欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

如何通过JS组件Bootstrap实现图片轮播效果

来源:本站整理 作者:佚名 时间:2016-10-20 TAG: 我要投稿

本文主要来学习一下JavaScript插件--轮播。废话不多说,直接进入学习。完整教程可查看:Bootstrap3.0教程
轮播
 style="width:900px; margin-left:auto; margin-right:auto;">
 id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 class="carousel-indicators">
 data-target="#carousel-example-generic" data-slide-to="0" class="active">
  data-target="#carousel-example-generic" data-slide-to="1">
 data-target="#carousel-example-generic" data-slide-to="2">
 
 class="carousel-inner" style="text-align:center">
 class="item active">
 >
 class="item">
 >
 class="item">
 >
 class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
 class="glyphicon glyphicon-chevron-left">
 class="right carousel-control" href="#carousel-example-generic" data-slide="next">
 class="glyphicon glyphicon-chevron-right">
 src="js/jquery-2.0.3.min.js">
 src="js/bootstrap.min.js">
 type="text/javascript">
//$('.carousel').carousel('next');
Internet Explorer 8 & 9不支持过渡动画效果
Bootstrap基于CSS3实现动画效果,但是Internet Explorer 8 & 9不支持这些必要的CSS属性。因此,使用这两种浏览器时将会丢失过渡动画效果。而且,Bootstrap并不打算使用基于jQuery实现替代功能。
可选选项
在任何.item中均可以通过添加.carousel-caption从而为每帧幻灯片添加说明文字。也可以添加任何HTML代码,这些HTML代码将会被自动排列和格式化。
 class="item active">
 >
 class="carousel-caption">
First Thumbnail label
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.
为三个项,分别加上,然后效果就有了额。
可访问性问题
轮播组件并不兼容可访问性标准。如果需要兼容,请考虑其他展示幻灯片的方案。
用法 通过data属性
通过data属性可以很容易的控制轮播的定位。data-slide可以接受控制播放位置的prev或next关键字。另外,还可以通过data-slide-to传递以0开始的幻灯片下标。
data-ride="carousel"属性用来标记在页面加载之后即开始启动的轮播组件。
在最外层的轮播容器中添加即可
通过JavaScript
手动启动轮播组件(上面我们通过使用data-ride属性进行自动开启轮播组件。):
$('.carousel').carousel()
选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如data-interval=""。
方法
$("").carousel(options)
初始化轮播组件,接受一个可选的object类型的options参数,并开始幻灯片循环。
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle') 从左到右循环各郑
.carousel('pause') 停止轮播。
.carousel(number) 将轮播定位到指定的帧上(帧下标以0开始,类似数组)。
.carousel('prev') 返回到上一郑
.carousel('next') 转到下一郑
事件
Bootstrap的轮播组件暴露了两个事件用于监听。
$('#carousel-example-generic').on('slide.bs.carousel', function ()
{
alert(1);
})
就这样为轮播组件绑定事件,然后在相应的运行时就会执行的。这个在之前的JavaScript插件中讲解的也比较多,形式都是通用的,所以只要会用就可以了。
图片
这是几个比较实用的图片轮播插件,效果很不错,合理的使用,总会给你的页面加分的,希望对大家的学习有所帮助。
 

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载