八、手风琴、图片轮播
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