bootstrap js插件篇——手风琴、图片轮播

八、手风琴、图片轮播

 

8.1 手风琴基本结构

 

 

注：1、面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式。

      2、通过锚链接的方法把标题区域和面板区捆绑在一起

      3、在 panel-collapse 样式上添加 collapse，控制面板内容区是否可视

      4、使用 panel 的 panel-title 做为触元素，使用panel-body的父元素作为折叠区；

8.2 data-触发

   data-toggle值设置为 collapse，data-target="#折叠区标识符"

 

 

8.3.图片轮播基本结构

 

8.4 data-的自定义属性

 

=》data-ride 属性：取值 carousel，并且将其定义在 carousel 上（图片自动轮播）

 

=》data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如上图所示，取值为“#myCarousel”，并且将其定义在轮播图计数器的每个 li 上。

 

=》data-slide 属性：取值包括 prev，next，（prev表示向后滚动，next 表示向前滚动）。该属性值定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。

 

=》data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），定义在轮播图计数器的每个 li 上。

 

8.5 js触发

没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换

$("容器ID名或类名").carousel();

参数设置：

 

调用方法：

.carousel("cycle")：从左向右循环播放；

.carousel("pause")：停止循环播放；

.carousel("number")：循环到指定的帧，下标从0开始，类似数组；

.carousel("prev")：返回到上一帧；

.carousel("next")：下一帧

Eg