使用BootStrap建立响应式网页――通栏轮播图(carousel)
发布时间:2020-12-14 23:01:10 所属栏目:资源 来源:网络整理
导读:1、bootstrap提供了js插件――轮播图 我们还是照旧,直接拿过来用,需要改的地方再说。 2、修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg(保存大图)和data-img-xs(保存小图)属性保存图片的路径,利用jQuery的data函
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,'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),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |