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
