解决layui轮播图满屏是高度自适应的问题

更新时间:2020-03-29 编辑:未知 关注人次:0 云搜索


解决办法: 
 
实例代码:
 
 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()
})
有用就给个赞呗!

解决方法2

直接采用css 在PC 端定义固定高度,在手机端屏幕宽度下定义高为100% 即可实现;

 

 

本文地址: http://www.4435.cn/a/xinwenguandian/jianzhanzhishi/2020/0329/32314.html ,转载请注明出处。

服务支持

我们珍惜您每一次在线询盘,有问必答,用专业的态度,贴心的服务。

让您真正感受到我们的与众不同!