html页面中 点击图片 当前图片切换到另一张图片
时间: 2023-09-17 08:11:58 浏览: 453
html图片居中图片列表左右切换可放大展示特效
您可以使用JavaScript来实现点击图片切换到另一张图片的功能。具体实现步骤如下:
1. 在HTML中,为需要切换的图片添加一个id属性,例如:
```
<img id="myImage" src="image1.jpg">
```
2. 在JavaScript中,获取该图片的元素并添加一个点击事件监听器,例如:
```
var myImage = document.getElementById("myImage");
myImage.addEventListener("click", function() {
// 切换图片的代码
});
```
3. 在点击事件监听器中,使用if语句判断当前图片的src属性,根据不同的情况设置新的src属性值,例如:
```
if (myImage.src.match("image1")) {
myImage.src = "image2.jpg";
} else {
myImage.src = "image1.jpg";
}
```
完整的代码如下:
```
<img id="myImage" src="image1.jpg">
<script>
var myImage = document.getElementById("myImage");
myImage.addEventListener("click", function() {
if (myImage.src.match("image1")) {
myImage.src = "image2.jpg";
} else {
myImage.src = "image1.jpg";
}
});
</script>
```
这样,当用户点击该图片时,就会切换到另一张图片。
阅读全文