基于layui轮播图满屏是高度自适应的解决方法
2019-09-16 19:58
1491 查看
在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决。后来看到了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轮播图满屏是高度自适应的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!
- 解决div高度自适应的方法
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 三种有效解决DIV高度自适应的方法
- gridview 中需要高度自适应的解决方法
- float过后 高度无法自适应的解决方法
- HTML/CSS中,DIV高度自适应的解决方法
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 当子级元素浮动时让父级元素高度自适应的三种方法(以及多个子集元素同时存在浮动和绝对定位时的问题的解决办法)
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 有关scollview嵌套webview底部空白,高度无法自适应的问题解决方法
- 解决列高度自适应的五种方法!
- 子层div浮动导致父层无法自适应高度的解决方法
- .clear方法解决网页自适应高度的问题
- UIWebView添加图片点击事件、调整字体大小与高度自适应的解决方法
- 解决div列高度自动适应的三种最常用的方法
- 解决列高度自适应的五种方法
- 浮动层自动适应高度的解决方法
- 高度不适应bug--解决方法
- 子元素浮动父容器高度不能自适应的CSS解决方法