简单实现JavaScript图片切换效果

时间：2023-12-08

让我为您详细讲解如何简单实现JavaScript图片切换效果。

一、准备工作

在实现图片切换效果之前，我们需要准备以下内容：

HTML文件中需要引入图片和JavaScript文件

在html文件中，需要通过img元素引入要切换的图片，并通过script元素引入javascript文件。

<body>
  <img id="img1" src="pic1.jpg" alt="picture1">
  <img id="img2" src="pic2.jpg" alt="picture2" style="display: none;">

  <script type="text/javascript" src="changePic.js"></script>
</body>

以上代码中，我们在img元素上添加了id属性，用于在JavaScript中获取该元素节点。

编写JavaScript函数

这里我们需要实现一个JavaScript函数，用于在鼠标悬停时，切换图片。具体代码如下：

function changePic() {
  var pic1 = document.getElementById("img1");
  var pic2 = document.getElementById("img2");
  if (pic1.style.display === "none") {
    pic1.style.display = "block";
    pic2.style.display = "none";
  } else {
    pic1.style.display = "none";
    pic2.style.display = "block";
  }
}

以上代码中，我们通过getElementById方法获取了要切换的两张图片，通过获取图片的style属性，判断图片当前是否显示，如果是，则将pic1隐藏，pic2显示；否则将pic1显示，pic2隐藏。

二、实现图片切换效果

准备工作完成后，我们需要将changePic()函数绑定到要切换的图片上。

绑定到img元素上：

<body>
  <img id="img1" src="pic1.jpg" alt="picture1" onmouseover="changePic()">
  <img id="img2" src="pic2.jpg" alt="picture2" style="display: none;">

  <script type="text/javascript" src="changePic.js"></script>
</body>

以上代码中，我们在图片元素上添加了onmouseover事件，将其绑定到changePic()函数上，表示当鼠标悬停在当前图片上时，切换图片。

绑定到a元素上：

<body>
  <a href="#" onmouseover="changePic()"><img id="img1" src="pic1.jpg" alt="picture1"></a>
  <a href="#" onmouseover="changePic()" style="display: none;"><img id="img2" src="pic2.jpg" alt="picture2"></a>

  <script type="text/javascript" src="changePic.js"></script>
</body>

以上代码中，我们采用了另一种方法，将img元素嵌套到a元素中，将onmouseover事件绑定到a元素上，表示当鼠标悬停在当前a元素上时，切换图片。

三、示例说明

以下是两个实例，演示了如何通过不同的事件绑定，实现图片切换效果。

绑定到img元素上的实例：当鼠标悬停在第一张图片上时，切换图片。

<body>
  <img id="img1" src="pic1.jpg" alt="picture1" onmouseover="changePic()">
  <img id="img2" src="pic2.jpg" alt="picture2" style="display: none;">

  <script type="text/javascript" src="changePic.js"></script>
</body>

绑定到a元素上的实例：当鼠标悬停在文字上时，切换图片。

<body>
  <a href="#" onmouseover="changePic()">Hover me to change picture</a>
  <a href="#" onmouseover="changePic()" style="display: none;"><img id="img2" src="pic2.jpg" alt="picture2"></a>

  <script type="text/javascript" src="changePic.js"></script>
</body>

以上是实现JavaScript图片切换效果的完整攻略，希望能对您有所帮助。

上一篇：浅谈原生JS实现jQuery的animate()动画示例 下一篇：浅谈JavaScript中this的指向更改

简单实现JavaScript图片切换效果

相关文章