Bootstrap JS插件使用实例(1)-轮播
来源：互联网 发布：淘宝女装上新文案 编辑：程序博客网 时间：2024/04/29 03:29
Bootstrap为用户提供了13个很有用的jquery插件，下面列出了各个插件及对应的js文件：
轮播 --------bootstrap-carousel.js
过度效果-----bootstrap-transition.js
模态对话框------bootstrap-modal.js
下拉菜单-------bootstrap-dropdown.js
滚动监听--------bootstrap-scrollspy.js
标签页--------bootstrap-tab.js
工具提示-------bootstrap-tooltip.js
弹出提示--------bootstrap-popover.js
警告框----------bootstrap-alert.js
按钮----------bootstrap-button.js
Collapse-------bootstrap-collapse.js
输入提示------bootstrap-typeahead.js
附加导航------bootstrap-affix.js
每个插件都可以单独的引入到页面中（注意插件间的依赖关系），或者一次性引入。另外，bootstrap.js 和bootstrap.min.js 文件将所有插件包含在一个文件中了（前者是未压缩版，后者是压缩版）。
本文讨论轮播(carousel)插件。先给个示例，可以直接拷下来运行：
01.<!DOCTYPE html>02.<html lang="en">03.<head>04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />05.<title>轮播示例</title>06.<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">07.<link href="http://www.see-source.com/bootstrap/css/docs.css" rel="stylesheet"">08.<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>09.<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-carousel.js"></script>10.<style type="text/css">11.body{width:800px; margin:auto; margin-top:100px;}12.</style>13.</head>14.<body>15.<div id="myCarousel" class="carousel slide">16.<ol class="carousel-indicators">17.<li data-target="#myCarousel" data-slide-to="0" class="" ></li>18.<li data-target="#myCarousel" data-slide-to="1" class=""></li>19.<li data-target="#myCarousel" data-slide-to="2" class="active"></li>20.</ol>21.<div class="carousel-inner">22.<div class="item">23.<img src="http://www.see-source.com/bootstrap/demo/images/bootstrap-mdo-sfmoma-01.jpg" alt="">24.<div class="carousel-caption">25.<h4>First Thumbnail label</h4>26.<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>27.</div>28.</div>29.<div class="item">30.<img src="http://www.see-source.com/bootstrap/demo/images/bootstrap-mdo-sfmoma-02.jpg" alt="">31.<div class="carousel-caption">32.<h4>Second Thumbnail label</h4>33.<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>34.</div>35.</div>36.<div class="item active">37.<img src="http://www.see-source.com/bootstrap/demo/images/bootstrap-mdo-sfmoma-03.jpg" alt="">38.<div class="carousel-caption">39.<h4>Third Thumbnail label</h4>40.<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>41.</div>42.</div>43.</div>44.<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>45.<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>46.</div>47.</body>48.</html>49.<script type="text/javascript">50.$('#myCarousel').carousel('next');51.</script>请点击下图的红色标记处即可启动自动播放，目前是5秒切换一次，效果图如下：
需要注意：
Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。如下：
1.<!DOCTYPE html>2.<html lang="en">3....4.</html>下面来对上面的代码进行解析下：
bootstrap.css Bootstrap 样式库，这是必不可少的。
docs.css 可有可无，这个样式库是为Bootstrap的帮助文档的示例(demo)使用的。
jquery.js 引入jquery，Bootstrap插件是jquery插件。
bootstrap-carousel.js 轮播插件
如果将上面的html代码中的不必要的样式去掉可简化成如下：
01.<div id="myCarousel" class="carousel">02.<ol class="carousel-indicators">03.<li data-target="#myCarousel" data-slide-to="0" class="active"></li>04.<li data-target="#myCarousel" data-slide-to="1"></li>05.<li data-target="#myCarousel" data-slide-to="2"></li>06.</ol>07.<!-- Carousel items -->08.<div class="carousel-inner">09.<div class="active item">…</div>10.<div class="item">…</div>11.<div class="item">…</div>12.</div>13.<!-- Carousel nav -->14.<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>15.<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>16.</div>bootstrap为轮播组件定义了一套轮播的css样式， 其中有三个最基本的样式".carousel"、".carousel-inner"、".item"。
".carousel" 是整个轮播的样式。".carousel-inner"是幻灯片组的样式，所有的幻灯片都定义在其内。".item"是每张幻灯片的样式(其内是轮播的元素，比如单张图片)，这三个样式定义了整个轮播组件的架构。
另外还有俩个".carousel-indicators"(指示器)、".carousel-control"(控制器) , 是可选的，这俩个是用于控制幻灯片的，比如"上一张"、"下一张"。".carousel-indicators"是指示器，控制直接切换到哪张，".carousel-control"是控制器，用于切换上一张、下一张，如上图标示。
有了上边的定义之后轮播组件就建成了，下面看下如何使其工作即自动切换。
启动方式
轮播组件定义好后是不能自动工作的，必须通过代码或手动（点击指示器或控制器）使其自动切换，有俩种方式。
1.通过data属性启动
有俩个data属性 "data-slide-to" 和 "data-slide" ，如上面代码中。"data-slide-to" 一般用作指示器，用于直接切换到第几张，其值从0(第1张)开始。"data-slide" 一般用作控制器，用于切换上一张、下一张，有俩个值："prev" 切换到上一张，"next"切换到下一张。示例：
1.<li data-target="#myCarousel" data-slide-to="0" class="" ></li>2.<li data-target="#myCarousel" data-slide-to="1" class=""></li>3.<li data-target="#myCarousel" data-slide-to="2" class="active"></li>1.<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>2.<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>一旦设置了好了data属性，那么只要在网页中手动点击任何一个都能启动轮播进行自动切换，默认情况每5秒切换一次。
2.通过javascript启动
如下：
1.$('.carousel').carousel()选项
bootstrap提供了俩个参数用于对轮播过程进行控制。
参数可以通过data属性或JavaScript传递。对于data属性，将参数名称附着到data-之后，即data-interval="" 示例如下：
1.<div id="myCarousel" class="carousel" data-interval="10000">1.<li data-target="#myCarousel" data-slide-to="0" data-interval="10000" class="" ></li>在指示器上设置
1.<a class="left carousel-control" href="#myCarousel" data-slide="prev" data-interval="10000">‹</a>对于通过javascript设置，如下：
1..carousel(options)即在通过javascript启动轮播的同时带上参数。
示例如下：1.$('.carousel').carousel({2.interval: 20003.})另外还提供了几个用于对轮播控制的方法，如下：
.carousel('cycle')
从左向右循环播放。
.carousel('pause')
停止循环播放。
.carousel(number)
循环到指定帧（下标从0开始，类似数组）。
.carousel('prev')
返回到上一帧。
.carousel('next')
下一帧。
设置过度效果
给轮播加过度效果，使轮播切换过程中不至于过于生硬。
需要设置俩个地方，
首先要引入过度效果的javascript插件bootstrap-transition.js ,同时将轮播组件添加类样式 .slide。 如下：
1.<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>2.<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-carousel.js"></script>3.<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script>1.<div id="myCarousel" class="carousel slide">事件
Bootstrap的轮播插件对外暴露了两个可被监听的事件。
slide实例方法被调用时，此事件会被立即触发。slid当切换完一帧后触发。slide事件用于在幻灯片每次切换时触发。slid事件也是在每次切换时触发，是在末尾触发，如果存在过度效果则在过度效果完成后触发。三者的先后顺序是slide事件--->过度效果---->slid事件。
可以如下给轮播添加事件：
1.$('#myCarousel').on('slide', function () {2.....3.})4.$('#myCarousel').on('slid', function () {5.....6.})
转载地址：http://www.see-source.com/blog/300000033/281
- Bootstrap JS插件使用实例(1)-轮播
- Bootstrap JS插件使用实例(1)-轮播
- BootStrap 轮播插件
- Bootstrap轮播插件
- bootstrap轮播插件
- Bootstrap学习js插件篇之轮播
- bootstrap js插件篇——手风琴、图片轮播
- Bootstrap的js插件之轮播(carousel)
- bootstrap之 carousel.js轮播插件源码分析
- 使用js插件实现图片轮播
- Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js
- Bootstrap JS插件使用实例(6)-折叠(手风琴效果)
- Bootstrap JS插件使用实例(2)-模态对话框
- Bootstrap JS插件使用实例(10)-附加导航(affix)
- Bootstrap Carousel（轮播插件）
- Bootstrap 轮播（Carousel）插件
- bootstrap图片轮播插件carousel
- Bootstrap 轮播（Carousel）插件
- IIS - css, images下载到客户端都是空文件问题
- 29-JavaScript-事件-事件驱动-更改外部css属性-区分浏览器内核
- Microsoft SQL Server 2008 R2学习（一）
- 一些软件设计的原则
- 排序算法总结
- Bootstrap JS插件使用实例(1)-轮播
- 【ios 网络篇 1】 协议设计
- Accelerated C++ Exercise 4-5(2)
- java接口
- Android中Activity的生命周期
- 链表的创建 打印 反转
- kettle初探
- js如何获取<s:radio>的值
- 构建高可扩Web架构和分布式系统实战
