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

2023-11-16

在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决。后来看到了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()
})

有用就给个赞呗!

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐