js如何实现鼠标点击换图片

建站资讯 2023年04月23日 12:11 54 im

　　在网页设计中，图片是不可或缺的元素。而鼠标点击换图片的效果也是常见的交互设计。本文将介绍如何使用JavaScript实现鼠标点击换图片的功能。

js如何实现鼠标点击换图片

1. 准备工作

　　在开始编写JavaScript代码之前，需要先准备好相关的HTML和CSS代码。首先，在HTML中添加一个img标签，用于显示图片。然后，给该img标签添加一个id属性，方便在JavaScript中获取该元素。

　　接着，在CSS中设置该img标签的宽度和高度，并添加一些样式，使其看起来更美观。例如：

　　#myImg {　　 width: 300px;　　 height: 200px;　　 border: 1px solid #ccc;　　 box-shadow: 2px 2px 5px #ccc;　　}

2. 编写JavaScript代码

　　在HTML和CSS都准备好之后，就可以开始编写JavaScript代码了。首先，需要获取到该img标签的引用，可以使用document.getElementById()方法来获取。例如：

　　var myImg = document.getElementById("myImg");

　　然后，定义一个数组，用于存储需要切换的图片路径。例如：

　　var imgArray = [　　 "image1.jpg",　　 "image2.jpg",　　 "image3.jpg"　　];

　　接着，定义一个变量，用于记录当前显示的图片的索引。例如：

　　var currentIndex = 0;

　　最后，使用addEventListener()方法为该img标签添加一个click事件，当用户点击该图片时，会触发该事件。在事件处理程序中，使用if语句来判断当前显示的图片是否是最后一张，如果是，则将currentIndex重置为0，否则将currentIndex加1。然后，根据currentIndex的值来设置该img标签的src属性，从而实现鼠标点击换图片的效果。例如：

　　myImg.addEventListener("click", function() {　　 if (currentIndex == imgArray.length - 1) {　　 currentIndex = 0;　　 } else {　　 currentIndex++;　　 }　　 myImg.src = imgArray[currentIndex];　　});