基於BootStrap的輪播圖
阿新 • • 發佈：2018-09-03
border 設計 height val image log span http tst
準備
先設計一個承載輪播圖的區域：四周向外陰影、扁平圓角：
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>
基於BootStrap的輪播圖