通过BootStrap实现轮播图的实际应用

 <div class="col-md-9 lunbo">  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top: 1.4285rem">   <!-- Indicators -->   <ol class="carousel-indicators" style="margin-left: -20rem">    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </li>   这里规定播放顺序 3个li代表3个小点 点一个小点 就是一张图    <li data-target="#carousel-example-generic" data-slide-to="1"></li>    <li data-target="#carousel-example-generic" data-slide-to="2"></li>   </ol>   <!-- Wrapper for slides -->   <div class="carousel-inner"> 这里是要播放的图 3张    <div class="item active">这里的active 对应上面active的那个小圆点     <img src="三组项目/PC/PC首页/lunbo1.jpg" alt="..." style="width: 64rem;height: 31.9285rem">     <div class="carousel-caption"></div>    </div>    <div class="item">     <img src="三组项目/PC/PC首页/lunbo2.jpg" alt="..."style="width: 64rem;height: 31.9285rem">     <div class="carousel-caption"></div>    </div>    <div class="item">     <img src="三组项目/PC/PC首页/lunbo3.jpg" alt="..."style="width: 64rem;height: 31.9285rem">     <div class="carousel-caption"></div>    </div>   </div>   <!-- Controls --> 这里就是那左右两个箭头   <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">上翻    <span class="glyphicon glyphicon-chevron-left"></span>   </a>   <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">下翻    <span class="glyphicon glyphicon-chevron-right"></span>   </a>  </div> </div>