Bootstrap实现轮播图

首先要导入bootstrap和jQuery的文件,导入过程就不多赘述,但是需要注意的是:导入bootstrap和jQuery的js文件时候,jQuery要在bootstrap前面,否则浏览器会抛出找不到$的错误!

下面是轮播图HTML代码,直接将该段代码放在页面需要放置轮播图的区域。

Bootstrap实现轮播图

Bootstrap实现轮播图

1 <!--轮播图--> 2 <div id=http://www.likecs.com/"myCarousel" class=http://www.likecs.com/"carousel slide" data-ride=http://www.likecs.com/"carousel"> 3 <!-- Indicators --> 4 <ol class=http://www.likecs.com/"carousel-indicators"> 5 <li data-target=http://www.likecs.com/"#carousel-example-generic" data-slide-to=http://www.likecs.com/"0" class=http://www.likecs.com/"active"></li> 6 <li data-target=http://www.likecs.com/"#carousel-example-generic" data-slide-to=http://www.likecs.com/"1"></li> 7 <li data-target=http://www.likecs.com/"#carousel-example-generic" data-slide-to=http://www.likecs.com/"2"></li> 8 </ol> 9 10 <!-- Wrapper for slides --> 11 <div class=http://www.likecs.com/"carousel-inner" role=http://www.likecs.com/"listbox"> 12 <div class=http://www.likecs.com/"item active"> 13 <img src=http://www.likecs.com/"/static/img/bxslider/1.png" alt=http://www.likecs.com/"..."> 14 <div class=http://www.likecs.com/"carousel-caption"> 15 投放广告请联系站长 16 </div> 17 </div> 18 <div class=http://www.likecs.com/"item"> 19 <img src=http://www.likecs.com/"/static/img/bxslider/2.jpg" alt=http://www.likecs.com/"..."> 20 <div class=http://www.likecs.com/"carousel-caption"> 21 投放广告请联系站长 22 </div> 23 </div> 24 25 <div class=http://www.likecs.com/"item"> 26 <img src=http://www.likecs.com/"/static/img/bxslider/3.jpg" alt=http://www.likecs.com/"..."> 27 <div class=http://www.likecs.com/"carousel-caption"> 28 投放广告请联系站长 29 </div> 30 </div> 31 </div> 32 33 <!-- Controls --> 34 <a class=http://www.likecs.com/"left carousel-control" href=http://www.likecs.com/"#myCarousel" role=http://www.likecs.com/"button" data-slide=http://www.likecs.com/"prev"> 35 <span class=http://www.likecs.com/"glyphicon glyphicon-chevron-left" aria-hidden=http://www.likecs.com/"true"></span> 36 <span class=http://www.likecs.com/"sr-only">Previous</span> 37 </a> 38 <a class=http://www.likecs.com/"right carousel-control" href=http://www.likecs.com/"#myCarousel" role=http://www.likecs.com/"button" data-slide=http://www.likecs.com/"next"> 39 <span class=http://www.likecs.com/"glyphicon glyphicon-chevron-right" aria-hidden=http://www.likecs.com/"true"></span> 40 <span class=http://www.likecs.com/"sr-only">Next</span> 41 </a> 42 </div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwsspj.html