Bootstrap学习js插件篇之轮播

曾经终败给现在 2022-08-27 04:48 227阅读 0赞

## 案例 ##

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

![Center][]

#### Internet Explorer 8 & 9不支持过渡动画效果 ####

Bootstrap基于CSS3实现动画效果，但是Internet Explorer 8 & 9不支持这些必要的CSS属性。因此，使用这两种浏览器时将会丢失过渡动画效果。而且，我们并不打算使用基于jQuery实现替代功能。

### 可选选项 ###

在任何`.item`中均可以通过添加`.carousel-caption`从而为每帧幻灯片添加说明文字。也可以添加任何HTML代码，这些HTML代码将会被自动排列和格式化。

1.   
2.   
3.

![900x500][]

### Second slide label ###

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#### 可访问性问题 ####

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

## 用法 ##

### 通过data属性 ###

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

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

### 通过JavaScript ###

手动启动轮播组件：

$('.carousel').carousel()

### 选项 ###

可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到`data-`之后，例如`data-interval=""`。

<table style="border-collapse:collapse; border-spacing:0px; max-width:100%; background-color:transparent; width:847px; margin-bottom:20px; border:1px solid rgb(221,221,221)"> 
 <thead style=""> 
  <tr style=""> 
   <th style="padding:8px; line-height:1.428571429; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221); width:100px"> 名称</th> 
   <th style="padding:8px; line-height:1.428571429; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221); width:50px"> 类型</th> 
   <th style="padding:8px; line-height:1.428571429; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221); width:50px"> 默认值</th> 
   <th style="padding:8px; line-height:1.428571429; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221)"> 描述</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> interval</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> number</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> 5000</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> 幻灯片轮换的等待时间。如果为false，轮播将不会自动开始循环。</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> pause</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> string</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> "hover"</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> 鼠标停留在幻灯片区域即暂停轮播，鼠标离开即启动轮播。</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> wrap</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> boolean</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> true</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> 轮播是否持续循环。</td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

#### .carousel(options) ####

初始化轮播组件，接受一个可选的`object`类型的options参数，并开始幻灯片循环。

$('.carousel').carousel({
      interval: 2000
    })

#### .carousel('cycle') ####

从左到右循环各帧。

#### .carousel('pause') ####

停止轮播。

#### .carousel(number) ####

将轮播定位到指定的帧上（帧下标以0开始，类似数组）。

#### .carousel('prev') ####

返回到上一帧。