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

最新推荐文章于 2025-04-30 15:38:01 发布

Web-Jason365

最新推荐文章于 2025-04-30 15:38:01 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： html5 jquery css3 javascript

本文链接：https://blog.youkuaiyun.com/Web_Jason365/article/details/108364862

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一点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 = 12

最低0.47元/天解锁文章