js通过添加按钮,实现交换图片的效果
时间: 2024-04-05 15:34:22 浏览: 11
好的,可以使用JavaScript来实现这个效果。下面是一个简单的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>交换图片</title>
<style>
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<button onclick="swapImages()">交换图片</button>
<br><br>
<img id="img1" src="image1.jpg">
<img id="img2" src="image2.jpg">
<script>
function swapImages() {
// 获取两张图片的元素
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
// 获取两张图片的源文件路径
var src1 = img1.src;
var src2 = img2.src;
// 交换两张图片的源文件路径
img1.src = src2;
img2.src = src1;
}
</script>
</body>
</html>
```
在这个示例中,我们定义了两张图片,分别有不同的源文件路径。当按钮被点击时,`swapImages()`函数会被调用,这个函数会获取两张图片的元素和源文件路径,然后交换它们的源文件路径。这样,两张图片就会交换位置。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)