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

关注

VIP免费原创最新推荐文章于 2026-03-28 09:05:03 发布 3k 阅读 AI 写同款· GEO 优化 ›

Layui图片预览，layer图片预览图片缩放，layui预览图片可放大放小前言 layer图片预览，并实现缩放实现代码复制直接可用效果图 html中只要放在layer-photos-demo中的图片都可用预览 <div id="layer-photos-demo"> <div> <img alt="" style="width:100px;" src="image/error.png"> </div> <div> <img alt="" style="width:10 阅读详情

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