Bootstrap3 轮番插件的调用方式

轮番插件的调用方式

1、JavaScript调用

JavaScript调用轮番其实很简单，只需在脚本中调用 carousel() 方法即可。格式为：

1. $('.carousel').carousel();

除此之外，Bootstrap还提供了其它一些方法，可以根据需要选择使用。这些方法为：

• .carousel('cycle')：从左向右循环播放。
• .carousel('pause')：暂停循环播放。
• .carousel(number)：循环到指定帧（下标从0开始，类似数组）。
• .carousel('prev')：返回到上一帧。
• .carousel('next')：播放下一帧。

比如，在上面的示例中，通过JavaScript调用，虽然轮番可以自动播放，但两个控制按钮还无法正常工作。此时，就可以调用 carousel("prev") 和 carousel("next") 方法，来实现交互功能。代码如下：

1. <script>
2. $('.carousel').carousel(({
3.   interval: 2000
4. });
5. $('.carousel a.left').click(function(){
6.   $('.carousel').carousel("prev");
7. });
8. $('.carousel a.right').click(function(){
9.   $('.carousel').carousel("next");
10. });
11. </script>

2、data 属性调用

如果不想编写JavaScript代码，就可以使用 data 属性来调用轮番插件，并实现与轮番插件的交互功能。

轮番插件需要两个交互功能：一个是点击控制按钮进行切换，一个是点击轮番指示器的小圆点进行切换。

如果希望用户点击控制按钮进行切换，只需为左侧按钮提供 data-slide="prev" 属性，为右侧按钮提供 data-slide="next" 属性即可。如：

1. <a class="carousel-control left"  href="#myCarousel" data-slide="prev">&lsaquo;</a>
2. <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

如果希望用户点击轮番指示器的小圆点进行切换，需要为轮番指示器的 <li> 元素提供 data-target 和 data-slide-to 属性。data-target 属性的值为轮番包含框的 id，data-slide-to 属性的值为点击小圆圈后，要切换到的轮番条目的索引，即 class="item" 元素的索引，索引从 0 开始。如：

1. <ol class="carousel-indicators">
2.   <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
3.   <li data-target="#myCarousel" data-slide-to="1"></li>
4.   <li data-target="#myCarousel" data-slide-to="2"></li>
5. </ol>

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。