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图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。