相思资源网 Design By www.200059.com
在做官网时，遇到轮播图的问题，本来自己写了个轮播图，怎奈有个问题（当我打开页面后去浏览其他页面，回来首页后会有图片会来回闪动，没有正确轮播）一直没有解决。后来看到了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轮播图满屏是高度自适应的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
layui,轮播图,高度,自适应
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无基于layui轮播图满屏是高度自适应的解决方法的评论...