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