data-ride="carousel" 和 data-slide="prev"、 data-slide="next" 三个语句去掉了，我们来使用JS代码实现“图片自动轮播”和“向前、向后按钮”的功能实现。
使用JS实现“图片自动轮播”和“向前、向后按钮”的功能实现
默认情况之下，如果 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("cycle")：从左向右循环播放；
•.carousel("pause")：停止循环播放；
•.carousel("number")：循环到指定的帧，下标从0开始，类似数组；
•.carousel("prev")：返回到上一帧；
•.carousel("next")：下一帧
例如，前面的调用方法，向前和向后两个按钮还无法正常工作，其实可以通过 .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"); }); }); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> body { padding: 10px; margin: 10px; } </style> </head> <body> <div data-ride="carousel"> <!-- Indicators --> <ol> <li data-target="#carousel-example" data-slide-to="0"></li> <li data-target="#carousel-example" data-slide-to="1"></li> <li data-target="#carousel-example" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div> <div> <img src="https://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" alt="..." /> <div>...</div> </div> <div> <img src="https://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" alt="..." /> <div>...</div> </div> <div> <img src="https://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" alt="..." /> <div>...</div> </div> </div> <!-- Controls --> <a href="#carousel-example" data-slide="prev"> <span></span></a> <a href="#carousel-example" data-slide="next"> <span></span></a> </div> <!--<script> $(function() { $('.carousel').carousel(); }); </script>--> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> <!--<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>--> <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>--> </body> </html>
脚本之家推荐bootstrap相关专题：