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);
});
});


“`