JavaScript实现点击图片切换：进阶教程-js教程-PHP中文网

JavaScript实现点击图片切换：进阶教程

霞舞

发布： 2025-09-06 20:16:24

原创

638人浏览过

javascript实现点击图片切换：进阶教程

本文将详细讲解如何使用JavaScript实现点击图片切换功能，重点介绍如何利用data-src属性存储备用图片路径，并通过JavaScript代码实现图片的动态切换。我们将提供清晰的代码示例和详细的步骤说明，帮助开发者快速掌握这一实用技巧。

使用data-src属性存储备用图片

首先，我们需要在HTML中为图片元素添加一个data-src属性。这个属性将用于存储点击后需要切换到的备用图片的路径。

<div class="col-lg-3">
    <img id="pbook" class="imagebooks" src="images/pink1.jpg"  alt="Book Cover">
</div>

登录后复制

在这个例子中，src属性指定了初始显示的图片（images/pink1.jpg），而data-src属性存储了点击后要切换到的图片（images/pink2.jpg）。 alt 属性增加了可访问性，当图片无法加载时，会显示 Book Cover。

JavaScript实现图片切换

接下来，我们使用JavaScript来监听图片的点击事件，并在点击时切换图片的src属性。

立即学习“Java免费学习笔记（深入）”；

造点AI

夸克 · 造点AI

325

查看详情

const image = document.getElementById("pbook");

image.onclick = () => {
    const newImage = image.dataset.src; // 获取data-src中存储的备用图片路径

    image.dataset.src = image.src;   // 将当前图片的src存储到data-src中，以便下次切换
    image.src = newImage;              // 将图片的src更新为备用图片的路径
}

登录后复制

这段代码首先获取了id为pbook的图片元素。然后，它为该图片添加了一个点击事件监听器。当图片被点击时，事件监听器会执行以下操作：

获取备用图片路径： 从image.dataset.src中获取data-src属性的值，也就是备用图片的路径，并将其存储在newImage变量中。
交换src和data-src： 将当前图片的src属性的值（即当前显示的图片路径）存储到data-src属性中，以便下次点击时可以切换回原始图片。
更新图片src： 将图片的src属性更新为newImage变量中存储的备用图片路径，从而实现图片的切换。

完整示例

下面是一个完整的示例，包含了HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
<title>图片点击切换</title>
<style>
.imagebooks {
    width: 200px; /* 设置图片宽度 */
    height: auto; /* 保持图片比例 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
}
</style>
</head>
<body>

<div class="col-lg-3">
    <img id="pbook" class="imagebooks" src="images/pink1.jpg"  alt="Book Cover">
</div>

<script>
const image = document.getElementById("pbook");

image.onclick = () => {
    const newImage = image.dataset.src;

    image.dataset.src = image.src;
    image.src = newImage;
}
</script>

</body>
</html>

登录后复制

注意事项:

确保你的 images/pink1.jpg 和 images/pink2.jpg 文件存在，并且路径正确。
可以根据实际需求修改CSS样式，调整图片的大小和外观。
alt 属性对于可访问性非常重要，确保为图片添加合适的描述。

总结

通过使用data-src属性和JavaScript，我们可以轻松实现点击图片切换的功能。这种方法简单易懂，并且可以灵活地应用于各种Web项目中。该方法的核心在于使用 data-* 属性存储额外的信息，避免了直接修改 HTML 代码的需要，使得代码更加简洁和易于维护。记住，清晰的代码结构和良好的注释习惯是编写高质量代码的关键。

以上就是JavaScript实现点击图片切换：进阶教程的详细内容，更多请关注php中文网其它相关文章！