用js实现点击小图显示大图

要实现点击小图显示大图的功能，可以使用JavaScript来处理点击事件，并使用CSS来控制大图的显示和隐藏。以下是一个简单的示例：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Zoom</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="small-image.jpg" alt="Small Image" class="small-image">
        <img src="large-image.jpg" alt="Large Image" class="large-image">
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
.image-container {
    position: relative;
    display: inline-block;
}

.small-image {
    cursor: pointer;
}

.large-image {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 10;
}

JavaScript代码

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const smallImage = document.querySelector('.small-image');
    const largeImage = document.querySelector('.large-image');

    smallImage.addEventListener('click', function() {
        largeImage.style.display = 'block';
    });

    largeImage.addEventListener('click', function() {
        largeImage.style.display = 'none';
    });
});

解释

HTML结构：
- 包含两个<img>标签，一个用于显示小图（.small-image），另一个用于显示大图（.large-image）。
- 大图初始状态下是隐藏的（display: none）。

CSS样式：
- .image-container设置为相对定位，以便大图可以绝对定位在其内部。
- .small-image设置鼠标指针为手型，表示可点击。
- .large-image设置为绝对定位，并初始隐藏。
JavaScript代码：
- 在DOM加载完成后，为小图添加点击事件监听器。
- 点击小图时，显示大图（largeImage.style.display = 'block'）。
- 点击大图时，隐藏大图（largeImage.style.display = 'none'）。

应用场景

这种功能常用于产品展示页面，用户可以点击缩略图查看高清大图。
也可以用于图片库或相册应用中，提供更便捷的图片查看体验。

可能遇到的问题及解决方法

大图加载缓慢：
- 使用图片懒加载技术，只在需要显示时才加载大图。
- 压缩大图文件大小，优化图片质量。

点击事件不触发：
- 确保JavaScript代码在DOM完全加载后执行。
- 检查是否有其他元素遮挡了小图，导致点击事件无法触发。
大图显示位置不正确：
- 确保.image-container的尺寸足够容纳大图。
- 调整.large-image的定位属性，确保其正确显示在小图上方。

通过以上步骤，你可以实现一个简单的点击小图显示大图的功能，并解决常见的问题。