Bootstrap实现轮播图
首先要导入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>
默认引入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>