本文主要来学习一下JavaScript插件--轮播。废话不多说，直接进入学习。完整教程可查看：
轮播
下面先来展示的就是此插件和相关组件制作的轮播案例。
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<li data-target="#carousel-example-generic" data-slide-to="2">
<div class="carousel-inner" style="text-align:center">
<div class="item active">
<div class="item">
<div class="item">
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left">
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right">
<script src="js/jquery-2.0.3.min.js">
<script src="js/bootstrap.min.js">
<script type="text/javascript">
//$('.carousel').carousel('next');
Bootstrap基于CSS3实现动画效果，但是Internet Explorer 8 & 9不支持这些必要的CSS属性。因此，使用这两种浏览器时将会丢失过渡动画效果。而且，Bootstrap并不打算使用基于jQuery实现替代功能。
在任何.item中均可以通过添加.carousel-caption从而为每帧幻灯片添加说明文字。也可以添加任何HTML代码，这些HTML代码将会被自动排列和格式化。
<div class="carousel-caption">
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-slide可以接受控制播放位置的prev或next关键字。另外，还可以通过data-slide-to传递以0开始的幻灯片下标。
data-ride="carousel"属性用来标记在页面加载之后即开始启动的轮播组件。
添加即可
手动启动轮播组件（上面我们通过使用data-ride属性进行自动开启轮播组件。）：
选项
可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-interval=""。
初始化轮播组件，接受一个可选的object类型的options参数，并开始幻灯片循环。 }) .carousel('cycle') 从左到右循环各帧。 .carousel('pause') 停止轮播。 .carousel(number) 将轮播定位到指定的帧上（帧下标以0开始，类似数组）。 .carousel('prev') 返回到上一帧。 .carousel('next') 转到下一帧。interval: 2000
事件
Bootstrap的轮播组件暴露了两个事件用于监听。
alert(1);
})
就这样为轮播组件绑定事件，然后在相应的运行时就会执行的。这个在之前的JavaScript插件中讲解的也比较多，形式都是通用的，所以只要会用就可以了。
这是几个比较实用的图片轮播插件，效果很不错，合理的使用，总会给你的页面加分的，希望对大家的学习有所帮助。
如果还不过瘾的话大家可以查看这些文章进行深入学习： 小编和大家共同进步！
如果大家还想深入学习，可以点击进行学习，再为大家附2个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/bootstrap/48734.html