Bootstrap 轮番插件Collapse 调用方式

调用方式

1、JavaScript调用

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

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

Bootstrap轮番插件Carousel提供了 2 个选项，这些选项都可以通过 data 属性或JavaScript进行设置。选项的详细说明见表 5‑9：

表 5‑9 Bootstrap轮番插件Carousel的选项
名称	类型	默认值	说明
interval	number	5000	自动播放过程中，在每帧停留的时间，单位为毫秒。如果取值false，则不自动启动轮番
pause	string	"hover"	当鼠标进入轮番区域时，暂停循环，鼠标移出时继续循环

调用 carousel() 方法时，可以将这 2 个选项作为一个对象参数。Bootstrap会使用所提供的参数来配置轮番的选项，并启动轮番。如，定义轮番的切换周期为 1 秒：

<script>
$('.carousel').carousel(({
interval: 2000
});
</script>

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

.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>

Bootstrap轮番插件Carouselh还定义了两个事件，通过这些事件，可以监听播放行为及轮番组件的状态。这些事件及含义见表 5‑10。

表 5‑10 Bootstrap轮番插件Carousel的事件及含义
事件	含义
slide	当 slide 实例方法被调用时，立即触发该事件
slid	当切换完一帧后，触发该事件

如，希望在轮番切换过程中，整个轮番显示橙色边框，切换之后显示浅黑色边框，代码可以这么写：

<script>
$('.carousel').carousel({
interval: 2000
});
$('.carousel').on('slide', function(e){
$(e.target).css({"border":"1px solid #f60"});
});
$('.carousel').on('slid', function(e){
$(e.target).css({"border":"1px solid #666"});
});
</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 上开源。

Bootstrap 轮番插件Collapse 调用方式相关推荐

Bootstrap 折叠插件Collapse 调用方式
调用方式 Bootstrap折叠插件Collapse的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用要激活折叠插件的激活行为,首 ...
Bootstrap3 轮番插件的调用方式
轮番插件的调用方式 1.JavaScript调用 JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可.格式为: $('.carousel').carousel() ...
Bootstrap3 折叠插件的调用方式
折叠插件的调用方式折叠插件的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用要激活折叠插件的激活行为,首先为标题部分的链接定义 ...
Bootstrap3 滚动监听插件的调用方式
滚动监听插件的调用方式无论何种实现方式,滚动监听都需要被监听的组件是position: relative;即相对定位方式.大多数时候是监听<body>元素. 1.data属性调用只需给 ...
Bootstrap3 插件的调用方式
插件的调用方式 Bootstrap的所有插件都支持两种调用方式:一种是 data 属性API调用,一种是JavaScript API调用.可以根据需要选择任意一种调用方式. 1.data属性API调用 ...
Bootstrap 轮番插件
轮番 Bootstrap轮番插件Carousel是一个灵活的.响应式的.无缝循环播放的幻灯片切换插件,它的内容可以是图片.视频.或者其他任何内容. Bootstrap轮番插件Carousel需要 bo ...
Bootstrap 折叠插件Collapse 选项
选项 Bootstrap折叠插件Collapse有2 个选项,一个是parent,一个是toggle,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑7. 表 5‑7 B ...
Bootstrap 折叠插件Collapse 事件
事件 Bootstrap还为折叠组件Collapse提供了一组事件,通过这些事件,可以监听用户的行为及折叠组件的状态.这些事件及含义见表 5‑8. 表 5‑8 折叠插件的事件及含义事件含义 sho ...
Bootstrap 折叠插件
折叠当列表菜单的条目特别多,而页面空间有限时,使用类似于手风琴的折叠菜单是不错的选择,因为它可以节约页面空间,方便用户浏览. 折叠插件需要 bootstrap-collapse.js 文件支持,在使 ...

Bootstrap 轮番插件Collapse 调用方式

调用方式

Bootstrap 轮番插件Collapse 调用方式相关推荐

最新文章

热门文章