Bootstrap轮播图
Bootstrap插件实现响应式轮播图
在开发响应式网站时,能自动适配屏幕的轮播图至关重要。原理十分简单,只要在标签后面加上特定的扩展类和钩子,调用插件中包含的方法即可。代码如下:
<!--轮播图 start *** *** --> <div id="myCarousel" class="carousel slide"> <!--圆点指针 start--> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!--轮播图片 start--> <div class="carousel-inner"> <div class="item active"> <img class="img-responsive" src="images/1.jpg" alt="1"> </div> <div class="item"> <img class="img-responsive" src="images/2.jpg" alt="2"> </div> <div class="item"> <img class="img-responsive" src="images/3.jpg" alt="3"> </div> </div> <!--轮播导航 start--> <a class="carousel-control left" data-slide="prev" href="#myCarousel" style="font-size:4em;">‹</a> <a class="carousel-control right" data-slide="next" href="#myCarousel" style="font-size:4em;">›</a> </div> <!--轮播图 end *** *** -->