小破孩
山水一程，三生有幸
搜索到
1
篇与
的结果
-
【Layui】图片预览 要在 layui 中点击图片实现预览功能，你可以使用 layui 的 layer.photos 方法来轻松实现图片预览。以下是如何在点击图片时使用 layer.photos 来创建图片预览的示例代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui Image Preview</title> <link rel="stylesheet" href="path/to/layui/css/layui.css"> <script src="path/to/layui/layui.js"></script> </head> <body> <div class="images-container"> <img class="preview-image" src="path/to/image1.jpg" alt="Image 1"> <img class="preview-image" src="path/to/image2.jpg" alt="Image 2"> <img class="preview-image" src="path/to/image3.jpg" alt="Image 3"> </div> <script> layui.use(['layer'], function() { var layer = layui.layer; // 点击事件处理 $('.preview-image').on('click', function() { var images = []; // 存放图片信息的数组 var currentImage = this.src; // 获取所有图片信息 $('.preview-image').each(function() { images.push({ alt: $(this).attr('alt'), src: $(this).attr('src') }); }); // 在弹窗中预览图片 layer.photos({ photos: { title: '图片预览', // 弹窗标题 data: images, start: images.findIndex(img => img.src === currentImage) // 从当前图片开始预览 }, shadeClose: true, // 点击遮罩关闭弹窗 closeBtn: 2 // 显示关闭按钮 }); }); }); </script> </body> </html> 在上述示例代码中，我们创建了一个包含多个图片的容器，然后为每个图片添加了共同的类名 preview-image。通过点击图片，会触发 layer.photos 方法，该方法可以用来创建一个图片预览弹窗。我们使用一个包含图片信息的数组来配置预览图片，其中 title 为弹窗标题，data 包含图片信息，start 指定从数组中的哪个索引开始预览。请注意，替换代码中的图片 URL 和其他相关信息。此示例为演示目的，你可以根据实际需求进行调整和修改。
