Bootstrap开发实战之响应式轮播图
本文主要内容是在导航条的下方做一张轮播图,自动播放最新的重要动态,供大家参考,具体内容如下
一、响应式轮播图
//响应式轮播图
<divid="myCarousel"class="carouselslide"> <olclass="carousel-indicators"> <lidata-target="#myCarousel"data-slide-to="0" class="active"></li> <lidata-target="#myCarousel"data-slide-to="1"></li> <lidata-target="#myCarousel"data-slide-to="2"></li> </ol> <divclass="carousel-inner"> <divclass="itemactive"style="background:#223240;"> <ahref="#"><imgsrc="img/slide1.png"alt="第一张"></a> </div> <divclass="item"style="background:#F5E4DC;"> <ahref="#"><imgsrc="img/slide2.png"alt="第二张"></a> </div> <divclass="item"style="background:#DE2A2D;"> <ahref="#"><imgsrc="img/slide3.png"alt="第三张"></a> </div> </div> <ahref="#myCarousel"data-slide="prev"class="carousel-controlleft">‹</a> <ahref="#myCarousel"data-slide="next"class="carousel-controlright">›</a> </div>
//所需要的jQuery控制
$('#myCarousel').carousel({ //设置自动播放/2秒 interval:3000, });
//调整轮播器箭头位置
$('.carousel-control').css('line-height',$('.carousel-innerimg').height()+'px'); $(window).resize(function(){ var$height=$('.carousel-innerimg').eq(0).height()||$('.carousel-innerimg').eq(1).height()||$('.carousel-innerimg').eq(2).height(); $('.carousel-control').css('line-height',$height+'px'); });
//所需要的CSS
a:focus{ outline:none; } .navbar-brand{ padding:0; } #myCarousel{ margin:50px000; } .carousel-inner.itemimg{ margin:0auto; } .carousel-control{ font-size:100px; }
如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程Bootstrap实战教程
精彩专题分享:jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。