<div> <!-- 设置图片轮播的顺序 --> <ol> <li data-target="#slidershow" data-slide-to="0">1</li> <li data-target="#slidershow" data-slide-to="1">2</li> <li data-target="#slidershow" data-slide-to="2">3</li> </ol> <!-- 设置轮播图片 --> <div> <div> <a href="##"><img src="https://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> <div> <h3>图片标题1</h3> <p>描述内容1...</p> </div> </div> <div> <a href="##"><img src="https://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a> <div> <h3>图片标题2</h3> <p>描述内容2...</p> </div> </div> <div> <a href="##"><img src="https://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a> <div> <h3>图片标题3</h3> <p>描述内容3...</p> </div> </div> </div> <a href="#slidershow" role="button"> <span></span> </a> <a href="#slidershow" role="button"> <span></span> </a> </div>
JS:
$(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }); });
在 carousel() 方法中可以设置具体的参数，如：
使用时，在初始化插件的时候可以传关相关的参数，如：
$("#slidershow").carousel({ interval: 3000 });
Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下:
.carousel("cycle")：从左向右循环播放；
.carousel("pause")：停止循环播放；
.carousel("number")：循环到指定的帧，下标从0开始，类似数组；
.carousel("prev")：返回到上一帧；
.carousel("next")：下一帧
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程