HTML实现图片查看与隐藏-JavaScript逻辑

最后，我们使用JavaScript来处理图片的点击事件，以及lightbox的显示和隐藏：

document.addEventListener('DOMContentLoaded', function () {
    var images = document.querySelectorAll('img');
    var lightbox = document.getElementById('lightbox');
    var lightboxImg = document.getElementById('lightboxImg');

    // 为每个图片添加点击事件处理器
    images.forEach(function (image) {
        image.addEventListener('click', function (event) {
            // 阻止事件冒泡，防止触发关闭lightbox的事件
            event.stopPropagation();
            // 设置lightboxImg的src属性为当前点击的图片的src，并显示lightbox
            lightboxImg.src = this.src;
            lightbox.style.display = 'flex';
        });
    });

    // 为lightbox添加点击事件处理器，用于关闭lightbox
    lightbox.addEventListener('click', function (event) {
        // 只有当点击的是lightbox背景而非lightboxImg时，才隐藏lightbox
        if (event.target === this) {
            lightbox.style.display = 'none';
        }
    });

    // 为lightboxImg添加点击事件处理器，用于关闭lightbox
    lightboxImg.addEventListener('click', function () {
        lightbox.style.display = 'none';
    });
});

这段代码首先监听DOM加载完成事件，然后获取所有图片元素和lightbox元素。接着，它为每张图片添加一个点击事件处理器，该处理器会更新lightbox中的图片并显示lightbox。同时，它还为lightbox和lightbox中的图片添加了点击事件处理器，以允许用户通过点击来关闭lightbox。

通过以上步骤，你可以实现一个简单但功能完整的图片查看与隐藏功能。这不仅提升了网站的交互性，也为用户提供了一个更加愉悦的浏览体验。