使用BootStrap建立响应式网页——通栏轮播图（carousel）
1、bootstrap提供了js插件——轮播图
我们还是照旧，直接拿过来用，需要改的地方再说。
2、修改
小屏幕看小图，大屏图看大图：这个可以利用自定义属性（data-XXX）data-img-lg（保存大图）和data-img-xs（保存小图）属性保存图片的路径，利用jQuery的data函数取出data-xxxx属性进行动态加载。
图片居中显示：大图用背景图片来做比较好一点，小图用img来做比较好一点（因为小图的话需要等比例缩放，用背景图做不到等比例缩放）。
承载轮播图的盒子高度：大图的的时候用图片的高度，小图自适应，所以要用到媒体查询，设置容器高度。
3、代码
<sectionid="banner"class="carouselslide"data-ride="carousel"> <!--小圆点--> <olclass="carousel-indicators"> <lidata-target="#banner"data-slide-to="0"class="active"></li> <lidata-target="#banner"data-slide-to="1"></li> <lidata-target="#banner"data-slide-to="2"></li> <lidata-target="#banner"data-slide-to="3"></li> </ol> <!--轮播图片--> <divclass="carousel-inner"role="listbox"> <divclass="itemactive"data-img-lg="img/slide_01_2000x410.jpg"data-img-xs="img/slide_01_640x340.jpg"> </div> <divclass="item"data-img-lg="img/slide_02_2000x410.jpg"data-img-xs="img/slide_02_640x340.jpg"> </div> <divclass="item"data-img-lg="img/slide_03_2000x410.jpg"data-img-xs="img/slide_03_640x340.jpg"> </div> <divclass="item"data-img-lg="img/slide_04_2000x410.jpg"data-img-xs="img/slide_04_640x340.jpg"> </div> </div> <!--左右轮播--> <aclass="leftcarousel-control"href="#banner"role="button"data-slide="prev"> <spanclass="glyphiconglyphicon-chevron-left"aria-hidden="true"></span> <spanclass="sr-only">Previous</span> </a> <aclass="rightcarousel-control"href="#banner"role="button"data-slide="next"> <spanclass="glyphiconglyphicon-chevron-right"aria-hidden="true"></span> <spanclass="sr-only">Next</span> </a> </section>
<scripttype="text/javascript">
$(function(){
//获取屏幕宽度
//varscreenWidth=$(window).width();
//判断是不是手机屏幕
//if(screenWidth<768){//手机屏幕
//$("#banner.carousel-inner.item").each(function(index,item){
//var$item=$(item);//因为传递的item是dom对象，要把dom对象改为jQuery对象
//$item.css("background-image","url("+$item.data('img-xs')+")");
//});
//}else{//大屏幕
//$("#banner.carousel-inner.item").each(function(index,item){
//var$item=$(item);//因为传递的item是dom对象，要把dom对象改为jQuery对象
//$item.css("background-image",'url('+$item.data('img-lg')+')');
//});
//}
//三元式
//varisPhone=screenWidth<768;
//$("#banner.carousel-inner.item").each(function(index,item){
//var$item=$(item);//因为传递的item是dom对象，要把dom对象改为jQuery对象
//$item.css("background-image","url("+$item.data(isPhone?'img-xs':'img-lg')+")");
//});
functionselectImg(){
varscreenWidth=$(window).width();
varisPhone=screenWidth<768;
$("#banner.carousel-inner.item").each(function(index,item){
var$item=$(item);//因为传递的item是dom对象，要把dom对象改为jQuery对象
$item.css("background-image",'url('+$item.data(isPhone?'img-xs':'img-lg')+')');
//我们需要小图的时候等比例变化，所以我们需要img标签
if(isPhone){
$item.html("<imgsrc='"+$item.data('img-xs')+"'alt=''/>");
}else{
$item.empty();
}
});
}
//$(window).on("resize",selectImg);//这样是没有效果的，必须屏幕尺寸变化一下才会加载图片
$(window).on('resize',selectImg).trigger('resize');//触发的是resize事件，不是事件处理程序selectImg
});
</script>
以上所述是小编给大家介绍的使用BootStrap建立响应式网页——通栏轮播图（carousel），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！