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

在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决。后来看到了layui插件的轮播图,就拿过来用了,但是图片高度不会自适应,图片变形。如图:

 

解决layui轮播图满屏是高度自适应的问题_第1张图片

解决layui轮播图满屏是高度自适应的问题_第2张图片

解决办法: 

实例代码:

 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()
})

有用就给个赞呗!

【精选秒杀】热卖云产品限量抢,云服务器20元/月起,服务稳定,价格更优
https://cloud.tencent.com/redirect.php?redirect=1039&cps_key=8ee0f9c89dfe0958071ea9b77e110670&from=console

淘宝优惠券: http://tq.xinrtd.com
京东优惠券: http://jp.xinrtd.com

你可能感兴趣的:(JavaScript,layui)