bootstrap的轮播图改变样式

改变中间小圆点

“`

Bootstrap 实例 - 轮播（Carousel）插件方法

.btn{

width: 80px;

height: 30px;

background: #c00000;

color: #ffffff;

}

#new li{

background: #fff;

color: #c00000;

width: 100px;

height: 30px;

}

#new .active{

background: #c00000;

color: #fff;

width: 100px;

height: 30px;

}

<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="../images/1.jpg" alt="First slide">
</div>
<div class="item">
<img src="../images/2.png" alt="Second slide">
</div>
<div class="item">
<img src="../images/1.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<!--<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>-->
<!--<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>-->

(function(){
// 初始化轮播(".start-slide").click(function(){

("#myCarousel").carousel('cycle');
});
// 停止轮播(".pause-slide").click(function(){

("#myCarousel").carousel('pause');
});
// 循环轮播到上一个项目(".prev-slide").click(function(){

("#myCarousel").carousel('prev');
});
// 循环轮播到下一个项目(".next-slide").click(function(){

("#myCarousel").carousel('next');
});
// 循环轮播到某个特定的帧(".slide-one").click(function(){

(this).addClass(′new′).siblings().removeClass(′new′);("#myCarousel").carousel(0);

});

(".slide-two").click(function(){
$(this).addClass('new').siblings().removeClass('new');
$("#myCarousel").carousel(1);
});(".slide-three").click(function(){

(this).addClass(′new′).siblings().removeClass(′new′);("#myCarousel").carousel(2);

});

});

“`