javascript问题：我想实现点击图片后，实现img1和img2的切换。

2024-12-19 08:58:06 JS 1266

要在 JavaScript 中实现点击图片后切换 img1 和 img2，可以使用以下详细步骤。这个任务可以通过操作 DOM（文档对象模型）和更改图片的 src 属性来实现。以下是如何实现的详细指南和示例代码：

1. HTML 结构

首先，设置 HTML 结构，包括两个图片元素和一个容器来显示这些图片。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Toggle</title>
    <style>
        #imageContainer img {
            width: 300px; /* 设置图片宽度 */
            height: auto; /* 自动调整高度 */
            cursor: pointer; /* 鼠标悬停时显示为手指图标 */
        }
    </style>
</head>
<body>
    <div id="imageContainer">
        <img id="toggleImage" src="img1.jpg" alt="Toggle Image">
    </div>

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

2. JavaScript 代码

使用 JavaScript 实现图片切换功能。创建一个 JavaScript 文件（如 script.js），并在其中编写代码。

javascript
// script.js
document.addEventListener('DOMContentLoaded', function () {
    // 获取图片元素
    const imgElement = document.getElementById('toggleImage');

    // 定义图片文件路径
    const img1 = 'img1.jpg';
    const img2 = 'img2.jpg';

    // 初始化状态变量
    let isImg1 = true;

    // 添加点击事件监听器
    imgElement.addEventListener('click', function () {
        // 切换图片路径
        if (isImg1) {
            imgElement.src = img2;
        } else {
            imgElement.src = img1;
        }

        // 更新状态
        isImg1 = !isImg1;
    });
});

3. 详细解释

3.1 HTML 结构

<img id="toggleImage" src="img1.jpg" alt="Toggle Image">: 使用 id 选择器来获取图片元素，并设置初始图片为 img1.jpg。
<style>: 设置图片样式，使其宽度固定，并在悬停时显示手指图标以指示点击功能。

3.2 JavaScript 代码

document.addEventListener('DOMContentLoaded', function () {...});: 确保 DOM 完全加载后执行脚本。
const imgElement = document.getElementById('toggleImage');: 获取图片元素以便操作。
const img1 = 'img1.jpg'; const img2 = 'img2.jpg';: 定义图片的路径。
let isImg1 = true;: 初始化状态变量，用于跟踪当前显示的图片。
imgElement.addEventListener('click', function () {...});: 为图片元素添加点击事件监听器。
if (isImg1) {...} else {...}: 根据当前状态切换图片。
isImg1 = !isImg1;: 更新状态以便下次点击时切换到另一张图片。

4. 完整示例

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Toggle</title>
    <style>
        #imageContainer img {
            width: 300px; /* 设置图片宽度 */
            height: auto; /* 自动调整高度 */
            cursor: pointer; /* 鼠标悬停时显示为手指图标 */
        }
    </style>
</head>
<body>
    <div id="imageContainer">
        <img id="toggleImage" src="img1.jpg" alt="Toggle Image">
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const imgElement = document.getElementById('toggleImage');
            const img1 = 'img1.jpg';
            const img2 = 'img2.jpg';
            let isImg1 = true;

            imgElement.addEventListener('click', function () {
                if (isImg1) {
                    imgElement.src = img2;
                } else {
                    imgElement.src = img1;
                }
                isImg1 = !isImg1;
            });
        });
    </script>
</body>
</html>

总结

HTML 结构: 包含一个图片元素和一个容器。
JavaScript 代码: 在图片点击时切换其 src 属性，实现图片的切换功能。
样式和用户体验: 添加鼠标悬停效果以提高用户体验。

关键字

JavaScript, 图片切换, img1, img2, src, addEventListener, DOMContentLoaded, click, DOM, 图片样式