准备
先设计一个承载轮播图的区域：四周向外阴影、扁平圆角：
1 #myShuffArea{ 2 width: 50%; 3 height: 300px; 4 border: solid 1px gainsboro; 5 border-radius:5%; 6 /*x:0,y:0就是四周*/ 7 box-shadow: 0px 0px 10px 5px lightgrey; 8 }
向该区域内放入轮播内容：
1 <body> 2 <div class="container"> 3 <!--自己定义的收容轮播的区域--> 4 <div id="myShuffArea"> 5 <div id="myCarousel" class="carousel slide" data-ride="carousel"> 6 <!--轮播指标--> 7 <ol class="carousel-indicators"> 8 <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 9 <li data-target="#myCarousel" data-slide-to="1" ></li> 10 <li data-target="#myCarousel" data-slide-to="2" ></li> 11 </ol> 12 <!--轮播项目--> 13 <div class="carousel-inner"> 14 <div class="item active"> 15 <img src="../img/feichang/bbbg.jpg" alt="图1"/> 16 </div> 17 <div class="item"> 18 <img src="../img/login/bg.jpg" alt="图2"/> 19 </div> 20 <div class="item"> 21 <img src="../img/login/touxiang.jpg" /> 22 </div> 23 </div> 24 <!-- 轮播（Carousel）导航 --> 25 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 26 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 27 <span class="sr-only">Previous</span> 28 </a> 29 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 30 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 31 <span class="sr-only">Next</span> 32 </a> 33 </div> 34 </div> 35 </div> 36 <!--修改延迟事件：变快--> 37 <script> 38 $(function(){ 39 $('#myCarousel').carousel({interval:2000}); 40 }) 41 </script> 42 </body>
