Bootstrap 2 如何创建轮播图及内容滑块，图像画廊

轮播的一般 HTML 结构如下：

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">…</div>
        <div class="item">…</div>
        <div class="item">…</div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">?</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">?</a>
</div>

我们可以把想要呈现的条目（比如图片）以循环顺序放置在 “carousel-inner” div 中

通过 “<!– Carousel nav –>” 创建条目的导航。它使用定制的 data 属性 “data-slide” 来导航到上一个和下一个条目

同时我们还需要引入?jquery.js?和?bootstrap.min.js两个文件来控制否则轮播图没有轮播效果

引入到头部<hear></hear>中

<script src="/static/lib/bootstrap/2.3.2/docs/assets/js/jquery.js"></script>
<script src="/static/lib/bootstrap/2.3.2/docs/assets/js/bootstrap.min.js"></script>

以下是最简单的轮播图效果：

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <img src="/static/i/css/paris.jpg" height="160px"/>
        </div>
        <div class="item">
            <img src="/static/i/css/paris2.jpg" height="160px"/>
        </div>
        <div class="item">
            <img src="/static/i/css/paris3.jpg" height="160px"/>
        </div>
        <div class="item">
            <img src="/static/i/css/paris1.jpg" height="160px"/>
        </div>    
    </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

我们可以使用下面的 JavaScript 代码来创建轮播

$('.carousel').carousel()

下面是我们可以使用的轮播的?方法

1.carousel(options)

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

$('.carousel').carousel({
  interval: 2000 // in milliseconds
})

2.carousel(‘cycle’)

从左到右循环各帧

$('.carousel').carousel('cycle');

3.carousel(‘pause’)

停止轮播

$('#myCarousel').hover(function () { 
   $(this).carousel('pause') 
}

4.carousel(number)

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

$("#carousel_nav").click(function(){ 
var item = 4; 
$('#home_carousel').carousel(item); 
return false; 
});

5.carousel(‘prev’)

将轮播转到上一帧

6.carousel(‘next’)

将轮播转到下一帧

这里有两个?事件?用来增强轮播的功能

1、slide

当 slide 实例方法被调用之后，此事件被立即触发

2、slid

当所有幻灯片播放完之后，此事件被触发