代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 600px;height: 500px;border: 1px solid #333;text-align: center;margin: auto;}.box1 img {width: 200px;margin-top: 100px;padding: 0px 30px;}</style>
</head><body><div class="box1"><img src="../img/img1.jpg" alt="" id="box1img1"><button id="box1btn">交换</button><img src="../img/img2.jpg" alt="" id='box1img2'></div><script>var img1 = document.querySelector('#box1img1');var img2 = document.querySelector('#box1img2');var btn = document.querySelector('#box1btn');console.log(img1, img2, btn);var flag = 1;btn.onclick = function () {if (flag) {img1.src = '../img/img2.jpg';img2.src = '../img/img1.jpg';flag = 0;} else {img1.src = '../img/img1.jpg';img2.src = '../img/img2.jpg';flag = 1;}}</script>
</body></html>效果图：
