bootstrap的carousel图片轮播

整个轮播是放在一个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;
}