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

javascript实现点击图片切换效果

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

实现原理

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

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

具体步骤

HTML结构：

首先，在HTML中添加标签，并使用data-*属性存储备用图片的路径。
```
<div class="col-lg-3">
    @@##@@
</div>
```
在这个例子中，src属性指向初始显示的图片 images/pink1.jpg，data-src属性指向备用图片 images/pink2.jpg。alt属性为图片提供描述，有助于SEO和可访问性。
JavaScript代码：

Programmatic SEO Auditor Lite
基础程序化SEO审计——分析页面模板、爬虫预算问题和索引健康状况。免费版包含模板分析、爬虫预算检查...

下载

接下来，使用JavaScript获取元素，并为其添加点击事件监听器。
```
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代码结合起来，即可实现完整的图片点击切换效果。



    <title>Image Switcher</title><div class="col-lg-3">
        @@##@@
    </div>

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

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

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

注意事项：