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

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

最新推荐文章于 2021-02-22 15:58:36 发布

原创

最新推荐文章于 2021-02-22 15:58:36 发布 · 3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #jquery #css3 #javascript

本文介绍了一种在layui框架下，通过调整CSS样式，使轮播图在不同视口尺寸下能够自适应缩放的方法。在解决图片在视口缩小时隐藏或变形的问题后，实现了大部分移动端设备上的良好自适应效果，尽管在极小视口尺寸下可能出现轻微变形。

一点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>
        <!-- 条目中可以是任意内容，如：<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