整个轮播是放在一个div .carousel和.slide的div中的,
包括3个部分:
1. 第一个部分indicator位于下方的指示器部分. 结构是一个ol和li, ol的类是carousel-indicators,li的属性有data-target, data-slide-to, 第一个data-slide-to=0, 第一个小圆点是class=active激活的, 注意li中只有属性和类, 是没有内容 的!!
2. 第二个部分是div .carousel-inner显示的内容框. 其中包含的每一个部分都是div.item 第一个是.active激活的. (每个item包括一个image和一个div.carousel-caption>hx+p
3. 第三个部分是左右的链接control:两个 ａ超链接标签, a .left .carousel-control, 一个属性是data-slide="prev" 另一个是a.right .carousel-control 属性是data-slide="next". 里面包含的是一个左右方向的图标.... 当然, 两个a超链接都要设置href=#mycarousel, 注意这里不是通过 data-target属性来实现的, 是通过a的href超链接属性来实现的 #mycarousel 即前面的轮播div容器
使用js可以控制, carousel的方法和现实方式:
$('.carousel').carousel({
interval: 2000 // 注意这里不要放分号!
});
通过firefox下的控制台, 查看元素的类样式, 可以方便的修改 元素原来默认的颜色等样式, 如下图的 修改carousel默认的active indicators的颜色:
其中的活动指示点, 通过重载 来获得.
<style type="text/css">
.carousel-indicators .active{
background-color: orange;
}