Bootstrap實現輪播圖
- 2020 年 3 月 15 日
- 筆記
首先要導入bootstrap和jQuery的文件，導入過程就不多贅述，但是需要注意的是：導入bootstrap和jQuery的js文件時候，jQuery要在bootstrap前面，否則瀏覽器會拋出找不到$的錯誤！
下面是輪播圖HTML程式碼，直接將該段程式碼放在頁面需要放置輪播圖的區域。
1 <!--輪播圖--> 2 <div id="myCarousel" class="carousel slide" data-ride="carousel"> 3 <!-- Indicators --> 4 <ol class="carousel-indicators"> 5 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 6 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 7 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 8 </ol> 9 10 <!-- Wrapper for slides --> 11 <div class="carousel-inner" role="listbox"> 12 <div class="item active"> 13 <img src="/static/img/bxslider/1.png" alt="..."> 14 <div class="carousel-caption"> 15 投放廣告請聯繫站長 16 </div> 17 </div> 18 <div class="item"> 19 <img src="/static/img/bxslider/2.jpg" alt="..."> 20 <div class="carousel-caption"> 21 投放廣告請聯繫站長 22 </div> 23 </div> 24 25 <div class="item"> 26 <img src="/static/img/bxslider/3.jpg" alt="..."> 27 <div class="carousel-caption"> 28 投放廣告請聯繫站長 29 </div> 30 </div> 31 </div> 32 33 <!-- Controls --> 34 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 35 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 36 <span class="sr-only">Previous</span> 37 </a> 38 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 39 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 40 <span class="sr-only">Next</span> 41 </a> 42 </div>
輪播圖html
默認引入bootstrap和jQuery之後，輪播圖就可以按照默認方式動態起來，如果想要自定義輪播速度，輪播方向等功能，可以把下面程式碼作為例子，結合bootstrap官網的參數進行各種調整。
1 <script> 2 $(function () { 3 #輪播切換時間設置為2秒，默認是5秒 4 $('#myCarousel').carousel({ 5 interval: 2000, 6 }) 7 #點擊輪播圖下方小圓點可以改變輪播圖片 8 $("#myCarousel li").click(function () { 9 var index=$(this).attr("data-slide-to") 10 $('#myCarousel').carousel(parseInt(index)) 11 }) 12 }) 13 </script>
輪播js
