掌握JS图片切换技巧，让页面交互更精彩！

2023-12-22 16:06:13

作为一名web开发者，打造用户体验良好的网站至关重要。其中，图片切换效果是提升交互性和视觉吸引力的有效手段。本篇文章将深入浅出地探讨如何使用JavaScript（JS）实现图片切换，帮助你轻松解锁这一利器。

1. 理解图片切换的基本原理

图片切换的本质是通过更改HTML元素的CSS属性来实现的。例如，你可以使用display属性来显示或隐藏图片，或使用opacity属性来控制图片的透明度。

2. 编写JS图片切换脚本

有了基础知识，接下来让我们编写一个JS脚本来实现图片切换。首先，你需要获取要切换的图片元素。可以使用document.getElementById()方法，该方法接受元素的ID作为参数。

const image1 = document.getElementById("image1");
const image2 = document.getElementById("image2");

然后，你可以编写一个函数来切换图片的显示状态。这个函数可以接受两个参数：要显示的图片元素和要隐藏的图片元素。

function switchImages(showImage, hideImage) {
  showImage.style.display = "block";
  hideImage.style.display = "none";
}

3. 触发图片切换事件

最后，你需要定义一个触发图片切换事件的事件监听器。这个事件监听器可以是点击、鼠标悬停或任何其他你希望触发切换的事件。

image1.addEventListener("click", () => {
  switchImages(image2, image1);
});

4. 实际应用

现在，让我们将这些代码组合在一起，创建一个实际的图片切换效果。

<img id="image1" src="image1.jpg" alt="Image 1">
<img id="image2" src="image2.jpg" alt="Image 2" style="display: none;">

<script>
const image1 = document.getElementById("image1");
const image2 = document.getElementById("image2");

function switchImages(showImage, hideImage) {
  showImage.style.display = "block";
  hideImage.style.display = "none";
}

image1.addEventListener("click", () => {
  switchImages(image2, image1);
});
</script>