Bootstrap JS插件使用实例(1)-轮播

发布时间：2020-12-17 21:13:58 所属栏目：安全来源：网络整理

导读：Bootstrap为用户提供了13个很有用的jquery插件，下面列出了各个插件及对应的js文件：轮播 --------bootstrap-carousel.js 过度效果-----bootstrap-transition.js 模态对话框------bootstrap-modal.js 下拉菜单-------bootstrap-dropdown.js 滚动监听-------

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)插件。先给个示例，可以直接拷下来运行：

 
    view source 
    print 
    ? 
   
 
    01. 
    <!DOCTYPE html> 
   
 
    02. 
    <html?lang="en"> 
   
 
    03. 
    head> 
   
 
    04. 
    meta?http-equiv"Content-Type"?content"text/html; charset=utf-8"?/> 
   
 
    05. 
    title>轮播示例</06. 
    link?href"http://www.see-source.com/bootstrap/css/bootstrap.css"?rel"stylesheet"07. 
    "http://www.see-source.com/bootstrap/css/docs.css"?"> 
   
 
    08. 
    script?type"text/javascript"?src"http://www.see-source.com/bootstrap/js/jquery.js"></script09. 
    "http://www.see-source.com/bootstrap/js/bootstrap-carousel.js"10. 
    style?"text/css"11. 
    body{width:800px; margin:auto; margin-top:100px;} 
   
 
    12. 
    </style13. 
    14. 
    body15. 
    div?id"myCarousel"?class"carousel slide"16. 
    ol?"carousel-indicators"17. 
    li?data-target"#myCarousel"?data-slide-to"0"??""?li18. 
    "1"?""19. 
    "2"?"active"20. 
    ol21. 
    "carousel-inner"22. 
    "item"23. 
    img?"http://www.see-source.com/bootstrap/demo/images/bootstrap-mdo-sfmoma-01.jpg"?alt24. 
    "carousel-caption"25. 
    h4>First Thumbnail label</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.</27. 
    div28. 
    29. 
    30. 
    "http://www.see-source.com/bootstrap/demo/images/bootstrap-mdo-sfmoma-02.jpg"?31. 
    32. 
    >Second Thumbnail label</33. 
    34. 
    35. 
    36. 
    "item active"37. 
    "http://www.see-source.com/bootstrap/demo/images/bootstrap-mdo-sfmoma-03.jpg"?38. 
    39. 
    >Third Thumbnail label</40. 
    41. 
    42. 
    43. 
    44. 
    a?"left carousel-control"?data-slide"prev">?</a45. 
    "right carousel-control"?"next">?</46. 
    47. 
    48. 
    html49. 
    "text/javascript"50. 
    $('#myCarousel').carousel('next'); 
   
 
    51. 
    > 
   

请点击下图的红色标记处即可启动自动播放，目前是5秒切换一次，效果图如下：

需要注意：

Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。如下：

 
   view source 
   print 
   ? 
  
   1. 
   <!DOCTYPE html> 
  
   2. 
   > 
  
   3. 
   ... 
  
   4. 
   >

下面来对上面的代码进行解析下：

bootstrap.css ? Bootstrap 样式库，这是必不可少的。

docs.css ? 可有可无，这个样式库是为Bootstrap的帮助文档的示例(demo)使用的。

jquery.js ? 引入jquery，Bootstrap插件是jquery插件。

bootstrap-carousel.js ? ? 轮播插件

如果将上面的html代码中的不必要的样式去掉可简化成如下：

01. 
   "carousel"> 
  

02. 03. "0"?04. "1"05. "2"06. 07. 

08. 09. "active item">…</10. 11. 12. 13.

14. "carousel-control left"?>&lsaquo;</15. "carousel-control right"?>&rsaquo;</16. 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"切换到下一张。示例：

用作指示器

用作控制器

一旦设置了好了data属性，那么只要在网页中手动点击任何一个都能启动轮播进行自动切换，默认情况每5秒切换一次。

2.通过javascript启动

如下：

$('.carousel').carousel()

执行上面js代码即可。其中 $('.carousel') 是jquery选择器，意思是将带有" carousel "类样式的元素作为轮播组件启动。当然也可以设置其他方式，如上面代码中通过给元素设置 ?id="myCarousel" ，则调用$('#myCarousel').carousel()也可。

选项

bootstrap提供了俩个参数用于对轮播过程进行控制。

名称	类型	默认值	描述
interval	number	5000	在自动轮播过程中，展示每帧所停留的时间。如果是false，轮播不会自动启动。
pause	string	"hover"	当鼠标在轮播区域内时暂停循环，在区域外时则继续循环。

参数可以通过data属性或JavaScript传递。对于data属性，将参数名称附着到data-之后，即data-interval=""?示例如下：

"carousel"?data-interval"10000"

设置到轮播的html元素上，10秒切换一次

"10000"?

 在指示器上设置

"prev"??

在控制器上设置。 
 对于通过javascript设置，如下：

.carousel(options)

即在通过javascript启动轮播的同时带上参数。

示例如下：

).carousel({

interval: 2000

})

启动轮播，同时设置2秒切换一次。

另外还提供了几个用于对轮播控制的方法，如下：

.carousel('cycle')

从左向右循环播放。

.carousel('pause')

停止循环播放。

.carousel(number)

循环到指定帧（下标从0开始，类似数组）。

.carousel('prev')

返回到上一帧。

.carousel('next')

下一帧。

设置过度效果

给轮播加过度效果，使轮播切换过程中不至于过于生硬。

需要设置俩个地方，

首先要引入过度效果的javascript插件bootstrap-transition.js,同时将轮播组件添加类样式 .slide。如下：

></script>

"http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script>

事件

Bootstrap的轮播插件对外暴露了两个可被监听的事件。

事件	描述
slide	当`slide`实例方法被调用时，此事件会被立即触发。
slid	当切换完一帧后触发。

slide事件用于在幻灯片每次切换时触发。slid事件也是在每次切换时触发，是在末尾触发，如果存在过度效果则在过度效果完成后触发。三者的先后顺序是slide事件--->过度效果---->slid事件。

可以如下给轮播添加事件：

'#myCarousel').on('slide',?function?() { 
  
   .... 
  
   }) 
  
   'slid'() { 
  
   5. 
   .... 
  
6.})

转载地址：http://www.see-source.com/blog/300000033/281

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!