layui框架轮播图实现轮播图片自适应视口缩放

柔光的暖阳◎ 2022-12-03 08:54 230阅读 0赞

一点JS也不懂，利用layui现成的框架轮播组件，简单的实现了layui框架轮播图自适应视口而缩放效果。

以下是代码：

<section>
            <div class="layui-carousel" id="test1">
                <div carousel-item>
                    <div><img src="img/1.jpg" alt=""></div>
                    <div><img src="img/2.jpg" alt=""></div>
                    <div><img src="img/3.jpg" alt=""></div>
                    <div><img src="img/4.jpg" alt=""></div>
                    <div><img src="img/5.jpg" alt=""></div>
                </div>
            </div>
            
            <script src="layui/layui.js"></script>
            <script>
                var b = 1200/360;//我的图片比例
                //获取浏览器宽度
                var W = $(window).width();
                var H = $(window).height();
                layui.use('carousel', function(){
                    var carousel = layui.carousel;
                    //建造实例
                    carousel.render({
                        elem: '#test1'
                        ,width: '100%' //设置容器宽度
                        ,height: (W/b).toString()+"px"  //按比例和浏览器可视页面宽度来获取高度
                        // ,arrow: 'always' //始终显示箭头
                        //,anim: 'updown' //切换动画方式
                    });
                });
            </script>
        </section>

因为我的section容器是未固定宽度的，所以在自适应缩放页面的时候发现图片并所视口一起缩放，而是随着视口缩放而隐藏掉了，导致轮播里的图片并未显示完整。

JS部分是在搜索来的，根据搜索来的方法虽然图片不会随着视口缩放而隐藏，但图片会随着视口的缩放而变形了，看上去不是那么的美观。

摸索了很久，后通过在Css样式里对.layui-carousel和.layui-carousel下的img设置最小高度，达到了layui框架轮播图自适应视口缩放效果。

以下是Css样式代码：

/*轮播图样式开始*/
    .layui-carousel{
        min-height: 14rem;
    }
    .layui-carousel img{
        width: 100%;
        height: auto;
        display: block;
        min-height: 14rem;
    }

虽然实现了播图自适应视口缩放效果，但在缩放到360px以下的时候图片可能会存在轻微变形，但还是在大部分的移动端设备上还是能实现轮播自适应效果。