layui怎么实现轮播图全屏展示

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

可以利用layui现成的框架轮播组件来实现轮播图自适应视口缩放效果。

以下是代码：

<section>
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div><img src="img/1.jpg-600" alt=""></div>
                <div><img src="img/2.jpg-600" alt=""></div>
                <div><img src="img/3.jpg-600" alt=""></div>
                <div><img src="img/4.jpg-600" alt=""></div>
                <div><img src="img/5.jpg-600" 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{
   <b style="color:transparent">来源gao@dai!ma.com搞$代^码网</b> width: 100%;
    height: auto;
    display: block;
    min-height: 14rem;
}

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

以上就是layui怎么实现轮播图全屏展示的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)