html点击按钮切换图片代码
时间: 2023-12-07 15:05:28 浏览: 165
可以使用JavaScript来实现点击按钮切换图片的功能,具体代码如下:
HTML代码:
```html
<button onclick="changeImage()">切换图片</button>
<img id="myImage" src="image1.jpg" width="200" height="200">
```
JavaScript代码:
```javascript
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match('image1.jpg')) {
image.src = 'image2.jpg';
} else {
image.src = 'image1.jpg';
}
}
```
其中,`changeImage()`函数用于切换图片,`document.getElementById('myImage')`用于获取元素ID为`myImage`的图片,`if...else...`语句用于判断当前图片的路径,如果是`image1.jpg`则切换到`image2.jpg`,反之则切换到`image1.jpg`。
相关问题
html点击按钮切换图片
以下是一个简单的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`属性。
怎么前端实现点击按钮切换图片
你可以通过 JavaScript 在按钮被点击时更改图片的 src 属性来实现图片切换。下面是一个简单的示例代码:
HTML:
```
<button id="btn">切换图片</button>
<img id="img" src="image1.jpg">
```
JavaScript:
```
var btn = document.getElementById("btn");
var img = document.getElementById("img");
btn.addEventListener("click", function() {
if (img.src.includes("image1.jpg")) {
img.src = "image2.jpg";
} else {
img.src = "image1.jpg";
}
});
```
这段代码会在页面加载时找到按钮和图片的元素,然后为按钮添加一个点击事件监听器。点击按钮时,如果当前图片的 src 包含 "image1.jpg",则将图片的 src 更改为 "image2.jpg",否则将其更改为 "image1.jpg"。