js点击小图切换大图源码

优势: 简单直观，易于实现和维护。 用户交互友好，提升用户体验。 可以灵活扩展，支持任意数量的小图和大图组合。
应用场景: 图片库或相册展示。 电商网站的产品缩略图预览。 新闻网站的图片新闻切换。

要实现点击小图切换大图的功能，可以使用JavaScript来处理点击事件，并动态更改大图的src属性。以下是一个简单的示例代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Switcher</title>
</head>
<body>
    <div>
        <img src="small-image1.jpg" alt="Small Image 1" class="small-image" data-large-src="large-image1.jpg">
        <img src="small-image2.jpg" alt="Small Image 2" class="small-image" data-large-src="large-image2.jpg">
        <img src="small-image3.jpg" alt="Small Image 3" class="small-image" data-large-src="large-image3.jpg">
    </div>
    <div>
        <img id="large-image" src="large-image1.jpg" alt="Large Image">
    </div>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const smallImages = document.querySelectorAll('.small-image');
    const largeImage = document.getElementById('large-image');

    smallImages.forEach(smallImage => {
        smallImage.addEventListener('click', function() {
            const largeSrc = this.getAttribute('data-large-src');
            largeImage.src = largeSrc;
        });
    });
});

解释

HTML部分:
- 创建多个小图，每个小图都有一个data-large-src属性，用于存储对应的大图路径。
- 创建一个大图元素，初始显示第一张大图。

JavaScript部分:
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 获取所有带有small-image类的小图元素。
- 为每个小图添加点击事件监听器，当点击小图时，获取其data-large-src属性的值，并将其设置为大图的src属性，从而实现切换效果。