使用BootStrap建立响应式网页——通栏轮播图（carousel）

1、bootstrap提供了js插件——轮播图
我们还是照旧，直接拿过来用，需要改的地方再说。
2、修改
小屏幕看小图，大屏图看大图：这个可以利用自定义属性（data-XXX）data-img-lg（保存大图）和data-img-xs（保存小图）属性保存图片的路径，利用jQuery的data函数取出data-xxxx属性进行动态加载。
图片居中显示：大图用背景图片来做比较好一点，小图用img来做比较好一点（因为小图的话需要等比例缩放，用背景图做不到等比例缩放）。
承载轮播图的盒子高度：大图的的时候用图片的高度，小图自适应，所以要用到媒体查询，设置容器高度。
3、代码

<section id="banner" class="carousel slide" data-ride="carousel"><！--小圆点 --><ol class="carousel-indicators"><li data-target="#banner" data-slide-to="0" class="active"></li><li data-target="#banner" data-slide-to="1"></li><li data-target="#banner" data-slide-to="2"></li><li data-target="#banner" data-slide-to="3"></li></ol><！-- 轮播图片 --><div class="carousel-inner" role="listbox"><div class="item active" data-img-lg="img/slide_01_2000x410.jpg" data-img-xs="img/slide_01_640x340.jpg"></div><div class="item" data-img-lg="img/slide_02_2000x410.jpg" data-img-xs="img/slide_02_640x340.jpg"></div><div class="item" data-img-lg="img/slide_03_2000x410.jpg" data-img-xs="img/slide_03_640x340.jpg"></div><div class="item" data-img-lg="img/slide_04_2000x410.jpg" data-img-xs="img/slide_04_640x340.jpg"></div></div><！-- 左右轮播 --><a class="left carousel-control" href="#banner" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#banner" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></section>

<script type="text/javascript">$（function（） {//获取屏幕宽度//var screenWidth=$（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"）+"）"）;//}）;//}//三元式//var isPhone=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"）+"）"）;//}）;function selectImg（）{var screenWidth=$（window）.width（）;var isPhone=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（"<img src=""+$item.data（"img-xs"）+"" alt="" />"）;}else {$item.empty（）;}}）;}//$（window）.on（"resize",selectImg）;//这样是没有效果的，必须屏幕尺寸变化一下才会加载图片$（window）.on（"resize",selectImg）.trigger（"resize"）;//触发的是resize事件，不是事件处理程序selectImg}）;</script>

以上所述是小编给大家介绍的使用BootStrap建立响应式网页——通栏轮播图（carousel），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！