NEWS

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

标签: | 作者:小编002 | VISITORS: | 来源:未知
29
Mar
2020
解决办法: 
 
实例代码:
 
 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% 即可实现;

 

 

相关新闻
首页 | 新闻观点 | 建站模板 | 经典案例 | 服务项目 | 网站建设 | 系统程序