要在 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 和其他相关信息。此示例为演示目的，你可以根据实际需求进行调整和修改。
评论 (0)