如何使幻灯片图像可单击以使用js在同一页上打开图像

<div id="slideshow">
    <img src="image1.jpg" alt="Image 1" onclick="showImage(this.src)">
    <img src="image2.jpg" alt="Image 2" onclick="showImage(this.src)">
    <!-- 更多图像 -->
</div>
<div id="imagePreview" style="display:none;">
    <img id="previewImage" src="" alt="Preview">
</div>

#imagePreview {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

function showImage(src) {
    var preview = document.getElementById('previewImage');
    preview.src = src;
    document.getElementById('imagePreview').style.display = 'block';
}

// 可以添加一个关闭预览的函数
function closeImagePreview() {
    document.getElementById('imagePreview').style.display = 'none';
}