JavaScript实现点击图片切换效果-js教程-PHP中文网

JavaScript实现点击图片切换效果

DDD

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

原创

279人浏览过

javascript实现点击图片切换效果

本文将详细介绍如何使用JavaScript实现点击图片切换的效果。通过利用HTML5的data-*属性存储备用图片路径，并结合JavaScript的事件监听和属性修改，可以轻松实现图片的动态切换。本文将提供完整的代码示例和详细的步骤说明，帮助开发者快速掌握该技巧。

实现原理

实现图片点击切换的核心在于：

存储备用图片路径： 使用HTML5的data-*属性，将备用图片的路径存储在HTML元素中。
事件监听： 使用JavaScript监听图片的点击事件。
属性修改： 在点击事件发生时，交换图片的src属性和data-*属性的值，从而实现图片的切换。

具体步骤

HTML结构：

首先，在HTML中添加<img>标签，并使用data-*属性存储备用图片的路径。

立即学习“Java免费学习笔记（深入）”；
```
<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属性为图片提供描述，有助于SEO和可访问性。
JavaScript代码：

火龙果写作
用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

接下来，使用JavaScript获取<img>元素，并为其添加点击事件监听器。
```
const image = document.getElementById("pbook");

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

    image.dataset.src = image.src;
    image.src = newImage;
}
```
登录后复制
这段代码首先获取了id为 pbook 的图片元素。然后，它添加了一个点击事件监听器。当图片被点击时，会执行以下操作：
- const newImage = image.dataset.src;：从data-src属性中获取备用图片的路径，并将其存储在 newImage 变量中。
- image.dataset.src = image.src;：将当前图片的 src 属性值（即当前显示的图片路径）赋值给 data-src 属性，以便下次点击时可以切换回原始图片。
- image.src = newImage;：将 newImage 变量中存储的备用图片路径赋值给 src 属性，从而实现图片的切换。

完整示例

将上述HTML和JavaScript代码结合起来，即可实现完整的图片点击切换效果。

<!DOCTYPE html>
<html>
<head>
    <title>Image Switcher</title>
</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>

登录后复制

注意事项：

确保图片路径正确，并且图片文件存在。
可以根据需要修改CSS样式，例如调整图片的大小和边距。
可以使用事件委托来优化性能，尤其是在有大量图片需要切换时。

总结

通过使用HTML5的data-*属性和JavaScript的事件监听，可以轻松实现图片点击切换的效果。这种方法简单易懂，并且具有良好的可维护性。掌握该技巧可以为网站和应用程序增加互动性和趣味性。

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