html点击按钮切换图片
时间: 2023-10-05 14:07:42 浏览: 109
以下是一个简单的HTML代码,可以通过点击按钮来切换图片:
```
<!DOCTYPE html>
<html>
<head>
<title>切换图片</title>
<style>
img {
max-width: 300px;
max-height: 300px;
}
</style>
</head>
<body>
<img id="myImage" src="image1.jpg" alt="图片1">
<br><br>
<button onclick="changeImage()">切换图片</button>
<script>
var image = document.getElementById("myImage");
var imageIndex = 1;
function changeImage() {
if (imageIndex == 1) {
image.src = "image2.jpg";
image.alt = "图片2";
imageIndex = 2;
} else {
image.src = "image1.jpg";
image.alt = "图片1";
imageIndex = 1;
}
}
</script>
</body>
</html>
```
该代码包括一张初始图片和一个切换图片的按钮。当按钮被点击时,会调用`changeImage()`函数来切换图片。该函数使用一个变量`imageIndex`来跟踪当前显示的图片,从而实现图片的切换。在函数内部,我们使用`if...else`语句来判断当前图片是第一张还是第二张,并相应地更改图片的`src`和`alt`属性。