js怎么点击按钮切换两张图片

通过JavaScript点击按钮切换两张图片的方法有多种，例如：使用事件监听器、修改元素属性、动态加载图片等。最常见的方法包括：使用 addEventListener 监听点击事件、修改 src 属性、使用数组存储图片路径。以下内容将详细介绍这些方法，并提供示例代码，帮助你更好地理解如何通过JavaScript实现这一功能。

一、使用事件监听器和修改 `src` 属性

1、基本概念

在网页中，我们可以通过JavaScript监听用户的点击事件，然后根据点击事件来改变图片的 src 属性，从而达到切换图片的目的。

2、示例代码

以下是一个简单的示例代码，通过点击按钮切换两张图片：

<!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>
    <img id="image" src="image1.jpg" alt="Image" width="300">
    <br>
    <button id="switchButton">Switch Image</button>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const image = document.getElementById('image');
            const button = document.getElementById('switchButton');
            button.addEventListener('click', () => {
                if (image.src.includes('image1.jpg')) {
                    image.src = 'image2.jpg';
                } else {
                    image.src = 'image1.jpg';
                }
            });
        });
    </script>
</body>
</html>

在这个示例中，页面加载完成后，JavaScript会添加一个点击事件监听器到按钮上。当按钮被点击时，代码会检查当前图片的 src 属性，并将其切换到另一张图片。

二、使用数组存储图片路径

1、基本概念

在更复杂的应用中，我们可能需要切换的不止两张图片。此时，可以使用数组来存储所有图片的路径，然后通过索引来切换图片。

2、示例代码

以下是一个使用数组存储图片路径的示例代码：

<!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>
    <img id="image" src="image1.jpg" alt="Image" width="300">
    <br>
    <button id="switchButton">Switch Image</button>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const images = ['image1.jpg', 'image2.jpg'];
            let currentIndex = 0;
            const imageElement = document.getElementById('image');
            const button = document.getElementById('switchButton');
            button.addEventListener('click', () => {
                currentIndex = (currentIndex + 1) % images.length;
                imageElement.src = images[currentIndex];
            });
        });
    </script>
</body>
</html>

在这个示例中，我们使用了一个数组 images 来存储图片路径，并使用 currentIndex 来跟踪当前显示的图片。当按钮被点击时，currentIndex 会递增，并且使用取模运算来确保索引不会超出数组的范围。

三、动态加载图片

1、基本概念

在某些情况下，我们可能需要动态加载图片，例如从服务器获取图片路径并动态插入到页面中。

2、示例代码

以下是一个动态加载图片的示例代码：

<!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 id="imageContainer">
        <img id="image" src="image1.jpg" alt="Image" width="300">
    </div>
    <br>
    <button id="switchButton">Switch Image</button>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const images = ['image1.jpg', 'image2.jpg'];
            let currentIndex = 0;
            const imageContainer = document.getElementById('imageContainer');
            const button = document.getElementById('switchButton');
            button.addEventListener('click', () => {
                currentIndex = (currentIndex + 1) % images.length;
                const newImage = document.createElement('img');
                newImage.src = images[currentIndex];
                newImage.alt = 'Image';
                newImage.width = 300;
                imageContainer.innerHTML = '';
                imageContainer.appendChild(newImage);
            });
        });
    </script>
</body>
</html>

在这个示例中，每次点击按钮时都会创建一个新的 img 元素，并将其插入到 imageContainer 中。这种方法适用于需要动态加载和切换图片的场景。

四、总结

通过以上几种方法，我们可以轻松实现通过JavaScript点击按钮切换两张图片的功能。具体来说：

使用事件监听器和修改 src 属性 是最简单和常见的方法，适用于切换两张图片的场景。
使用数组存储图片路径 可以方便地切换多张图片，适用于需要切换多张图片的场景。
动态加载图片 适用于需要从服务器获取图片路径并动态插入到页面中的场景。

以上方法都可以根据具体的需求进行调整和优化。如果你需要在项目管理系统中实现类似的功能，可以考虑使用 研发项目管理系统PingCode 或 通用项目协作软件Worktile，它们都提供了丰富的功能和灵活的配置选项，能够帮助你更好地管理项目和团队。

js怎么点击按钮切换两张图片

一、使用事件监听器和修改 src 属性

1、基本概念

2、示例代码

二、使用数组存储图片路径

1、基本概念

2、示例代码

三、动态加载图片

1、基本概念

2、示例代码

四、总结

相关问答FAQs：

一、使用事件监听器和修改 `src` 属性