html使用变量实现点击按钮来回切换图片
时间: 2024-09-19 10:14:59 浏览: 22
HTML结合JavaScript可以轻松地实现这个功能。首先,在HTML中,你可以创建一个按钮和两个图像元素,给它们设置初始状态,比如`<img>`标签的src属性分别对应两幅图片:
```html
<button id="switchButton">切换图片</button>
<img id="image1" src="image1.jpg" alt="图片1">
<img id="image2" src="image2.jpg" alt="图片2" style="display:none;">
```
然后,在JavaScript部分,编写一个函数来处理按钮的点击事件,通过改变`<img>`元素的`src`属性来切换显示的图片:
```javascript
document.getElementById('switchButton').addEventListener('click', function() {
var image1 = document.getElementById('image1');
var image2 = document.getElementById('image2');
if (image1.style.display === 'block') {
// 隐藏当前显示的图片并切换到下一张
image1.style.display = 'none';
image2.style.display = 'block';
} else {
// 如果已经隐藏,显示第一张
image1.style.display = 'block';
image2.style.display = 'none';
}
});
```
当用户点击按钮时,会检查当前哪张图片显示,如果显示的是第一张,就隐藏它并显示第二张;反之亦然。