html前端动态切换图片完整代码
时间: 2023-07-15 10:10:54 浏览: 61
以下是一个简单的HTML前端动态切换图片的完整代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>前端动态切换图片</title>
<style>
img {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>前端动态切换图片</h1>
<p>点击下面的按钮来切换图片:</p>
<button onclick="changeImage()">切换图片</button>
<br><br>
<img id="myImage" src="img1.jpg">
<script>
var myImage = document.getElementById("myImage");
var imageIndex = 1;
function changeImage() {
if (imageIndex == 1) {
myImage.src = "img2.jpg";
imageIndex = 2;
} else {
myImage.src = "img1.jpg";
imageIndex = 1;
}
}
</script>
</body>
</html>
```
在上面的代码中,我们首先定义了一个按钮,当用户点击这个按钮时,会触发 `changeImage` 函数来切换图片。我们使用 JavaScript 来实现这个函数。
在 JavaScript 中,我们定义了一个 `myImage` 变量,来表示我们要切换的图片。我们还定义了一个 `imageIndex` 变量,来跟踪当前显示的图片是第一张还是第二张。
在 `changeImage` 函数中,我们首先检查当前显示的图片是哪一张。如果是第一张,我们就将 `myImage` 的 `src` 属性设置为第二张图片的 URL,并将 `imageIndex` 设置为2。否则,我们就将 `myImage` 的 `src` 属性设置为第一张图片的 URL,并将 `imageIndex` 设置为1。
这样,当用户点击按钮时,就会切换图片。