[按下按钮时更改图片吗？

Question

<input type="button" value="Smurfalized" class="btn">

一开始我有HTML图片。

<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Cat_mosaic.JPG/375px-Cat_mosaic.JPG"></p>

<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Paw_and_pads.jpg/375px-Paw_and_pads.jpg"></p>

<p><img src="http://blogg.wikki.se/wp-content/uploads/2009/06/catbyBaikal.jpg" align="right"></p>

<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Laitche-P013.jpg/375px- Laitche-P013.jpg"></p>

这里是更改图像的功能。

function changeImg() {
    var imgArray = ["images/smurf1.jpg", "images/smurf2.jpg", "images/smurf3.jpg", "images/smurf4.jpg"]; // Lade till alla smurfbilder i en array.
    var replacePictures = document.querySelectorAll("img");
    for (var i = 0; i < imgArray.length; i++) { 
    replacePictures[i].src = imgArray[i]; // 
    }
}

Answer 1

嗨，您可以执行类似的操作，也可以尝试在执行相同操作的同时添加加载程序。

<p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Cat_mosaic.JPG/375px-Cat_mosaic.JPG">
</p>
<button onClick="changeImg()">click me</button>

function changeImg() {
    var imgArray = ["https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSfYuY6ibx5QJ3_1k2B3fiPGhhZqmIjR6bsOKcAoHxcrCxhN5_X&usqp=CAU"]; // Lade till alla smurfbilder i en array.
    var replacePictures = document.querySelectorAll("img");
    for (var i = 0; i < imgArray.length; i++) { 
    replacePictures[i].src = imgArray[i]; // 
    }
}

希望这会有所帮助