html里有6张图片,每点击一张就换成别的图片,再次点击图片后恢复成原始图片
时间: 2023-09-30 15:09:47 浏览: 67
好的,你可以尝试使用JavaScript来实现这个功能。首先,你可以在HTML中为每个图片添加一个唯一的ID,例如:
```html
<img src="image1.jpg" id="img1" onclick="changeImage('img1')">
<img src="image2.jpg" id="img2" onclick="changeImage('img2')">
<img src="image3.jpg" id="img3" onclick="changeImage('img3')">
<img src="image4.jpg" id="img4" onclick="changeImage('img4')">
<img src="image5.jpg" id="img5" onclick="changeImage('img5')">
<img src="image6.jpg" id="img6" onclick="changeImage('img6')">
```
然后,你可以编写一个JavaScript函数来更改图片的src属性。这个函数可以检查当前图片的src属性,如果它等于原始图片的路径,就将其更改为新的图片路径。如果它不等于原始图片路径,就将其更改回原来的图片路径。例如:
```javascript
function changeImage(id) {
var img = document.getElementById(id);
var originalSrc = img.src;
var currentSrc = img.getAttribute('data-current-src');
if (currentSrc === originalSrc) {
img.src = 'new-image.jpg';
img.setAttribute('data-current-src', 'new-image.jpg');
} else {
img.src = originalSrc;
img.setAttribute('data-current-src', originalSrc);
}
}
```
在这个例子中,我们使用了一个`data-current-src`属性来存储当前的图片路径,以便于在切换图片时进行比较。当用户点击图片时,`changeImage`函数会获取图片元素的ID,然后根据当前图片路径来判断是将其更改为新的图片路径还是将其更改回原来的图片路径。