默认情况之下，如果 carousel 容器上定义了 data-ride="carousel" 属性，页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下：
$(".carousel").carousel();
也可以通过容器的 ID 来指定：
$("#slidershow").carousel();
在 carousel() 方法中可以设置具体的参数，如：
|
属性名称 |
类型 |
默认值 |
描述 |
|
interval |
number |
5000 |
幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环 |
|
pause |
string |
hover |
默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放 |
|
wrap |
布尔值 |
true |
轮播是否持续循环 |
使用时，在初始化插件的时候可以传关相关的参数，如：
$("#slidershow").carousel({
interval: 3000
});
实际上，当我们给carousel()方法配置参数之后，轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下：
例如，前面的调用方法，向前和向后两个按钮还无法正常工作，其实可以通过 .carousel("prev") 和 .carousel("next") 方法让他们能正常工作，代码如下：
$(function(){
$("#slidershow").carousel({
interval:2000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
});
我来试试：使用JS实现“图片自动轮播”和“向前、向后按钮”的功能实现
可以看到我们已经把 data-ride="carousel" 和 data-slide="prev"、 data-slide="next" 三个语句去掉了，我们来使用JS代码实现“图片自动轮播”和“向前、向后按钮”的功能实现。
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报