js图片点击放大轮播—代码示例

温馨提示：这篇文章已超过299天没有更新，请注意相关的内容是否还可用！

实现图片点击放大轮播的效果可以通过JavaScript来完成。我们可以使用事件监听器来监听图片的点击事件，并在点击时进行相应的操作。

下面是一个示例代码，演示了如何实现图片点击放大轮播的效果：


<!DOCTYPE html>
<html>
<head>
<style>
    .gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .gallery img {
        width: 200px;
        height: 200px;
        object-fit: cover;
        margin: 10px;
        cursor: pointer;
    }
    .modal {
        display: none;
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        justify-content: center;
        align-items: center;
    }
    .modal img {
        max-width: 90%;
        max-height: 90%;
    }
</style>
</head>
<body>
    <div class="ed7a-ca8b-679a-3154 gallery">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
        <img src="image4.jpg" alt="Image 4">
    </div>
    <div class="ca8b-679a-3154-443c modal">
        <img id="modalImage" src="" alt="">
    </div>
<script>
    // 获取图片元素和模态框元素
    const images = document.querySelectorAll('.gallery img');
    const modal = document.querySelector('.modal');
    const modalImage = document.querySelector('#modalImage');
    // 为每个图片元素添加点击事件监听器
    images.forEach(image => {
        image.addEventListener('click', () => {
            // 设置模态框中的图片源为被点击的图片源
            modalImage.src = image.src;
            // 显示模态框
            modal.style.display = 'flex';
        });
    });
    // 点击模态框时隐藏模态框
    modal.addEventListener('click', () => {
        modal.style.display = 'none';
    });
</script>
</body>
</html>