如何解决layui轮播图满屏是高度自适应的问题-创新互联
小编给大家分享一下如何解决layui轮播图满屏是高度自适应的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司是一家专注于成都网站制作、网站建设与策划设计,章丘网站建设哪家好?成都创新互联公司做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:章丘等地区。章丘做网站价格咨询:18982081108在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决。后来看到了layui插件的轮播图,就拿过来用了,但是图片高度不会自适应,图片变形。如图:
解决办法:
实例代码:
var b = 1920/460;//我的图片比例 //获取浏览器宽度 var W = $(window).width(); var H = $(window).height(); layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#banner1' ,width: '100%' //设置容器宽度 ,height: (W/b).toString()+"px" //按比例和浏览器可视页面宽度来获取高度 ,arrow: 'always' //始终显示箭头 //,anim: 'updown' //切换动画方式 }); }); //窗口变化是重新加载 $(window).resize(function () { // setBanner(); window.location.reload() })
以上是“如何解决layui轮播图满屏是高度自适应的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文题目:如何解决layui轮播图满屏是高度自适应的问题-创新互联
标题来源:http://lswzjz.com/article/jpoco.html