Bootstrap3实用教程
4.12.2 轮番插件的调用方式
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

标签页

工具提示

弹出提示

警告框

按钮

折叠

轮番

轮番插件的使用方法

轮番插件的调用方式

1、JavaScript调用

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

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

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

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

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

<script>
$('.carousel').carousel(({
  interval: 2000
});
$('.carousel a.left').click(function(){
  $('.carousel').carousel("prev");
});
$('.carousel a.right').click(function(){
  $('.carousel').carousel("next");
});
</script>

2、data 属性调用

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

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

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

<a class="carousel-control left"  href="#myCarousel" data-slide="prev">&lsaquo;</a>
<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 开始。如:

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

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验