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

 更新时间:2016年05月16日 14:40:09   投稿:lijiao   我要评论
这篇文章主要为大家详细介绍了JS组件Bootstrap实现图片轮播效果的具体代码,对图片轮播效果感兴趣的小伙伴们可以参考一下

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

轮播

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

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

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

可访问性问题

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

用法 通过data属性

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

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

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

<div id="carousel-example-generic" class="carousel slide" 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插件中讲解的也比较多,形式都是通用的,所以只要会用就可以了。

图片

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

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

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

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • 微信小程序画布圆形进度条显示效果

    微信小程序画布圆形进度条显示效果

    这篇文章主要为大家详细介绍了微信小程序画布圆形进度条显示效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Bootstrap每天必学之导航条

    Bootstrap每天必学之导航条

    Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • javaScript canvas实现(画笔大小 颜色 橡皮的实例)

    javaScript canvas实现(画笔大小 颜色 橡皮的实例)

    下面小编就为大家分享一篇javaScript canvas实现(画笔大小 颜色 橡皮的实例),具有很好的参考价值,希望对大家有所帮助
    2017-11-11
  • JavaScript的兼容性与调试技巧

    JavaScript的兼容性与调试技巧

    可能在大家使用JavaScript效果时,会碰到在各个浏览器中页面的显示效果不同,甚至报错,这就是代码的兼容性问题。本文就是主要介绍JavaScript的兼容性与调试技巧,希望对大家有所帮助
    2016-11-11
  • es6学习之解构时应该注意的点

    es6学习之解构时应该注意的点

    解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰,下面这篇文章主要给大家介绍了关于在es6解构时应该注意的点,需要的朋友可以参考下。
    2017-08-08
  • 详细分析单线程JS执行问题

    详细分析单线程JS执行问题

    给大家详细讲解一下单线程javascript的执行问题,以及通过实例分析用法。
    2017-11-11
  • js手机号4位显示空格,银行卡每4位显示空格效果

    js手机号4位显示空格,银行卡每4位显示空格效果

    这篇文章主要介绍了js手机号4位显示空格,银行卡每4位显示空格效果,手机号和银行卡号,按照每4位显示一个空格的需求,非常具有实用价值,需要的朋友可以参考下。
    2017-03-03
  • javascript数组排序汇总

    javascript数组排序汇总

    本文给大家汇总了一下javascript的数组排序算法,包括冒泡排序、快速排序、插入排序、希尔排序,希望对大家熟悉javascript数组排序能够有所帮助。
    2015-07-07
  • Javascript isArray 数组类型检测函数

    Javascript isArray 数组类型检测函数

    在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js中检测对象类型的常见的方法有几种.
    2009-10-10
  • 按钮JS复制文本框和表格的代码

    按钮JS复制文本框和表格的代码

    有时候我们需要复制一个框的内容或者整个表格,一般的操作很可能造成一些不方便,一是操作步骤较为复制,一是复制表格的时候容易复制不完整或者格式出错。
    2011-04-04

最新评论