本文环境:windows10、layui2.5.6,本文适用于所有品牌的电脑。

可以利用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>
        <!-- 条目中可以是任意内容,如:<img src=""> -->
        <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以下的时候图片可能会存在轻微变形,但还是在大部分的移动端设备上还是能实现轮播自适应效果。

以上就是layui怎么实现轮播图全屏展示的详细内容,更多请关注其它相关文章!