使用javascript单击HTML可以多次更改图片

Question

我需要一个带有javascript的HTML程序，它有两张图片，点击从图片A到B，从图片B到A，等等。我想我需要一个循环......

Answer 1

请尝试以下代码

function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>

你可以在这里有例子https://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb

Answer 2

你可以在这里找到你想要做的一个很好的例子：https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

你只需稍微调整它就可以正确地改变图像。我建议使用变量构建一个函数来存储图像名称。

<script>
   function ChangeImage(){
   var picElement1 = document.getElementById('HTMLImgElement1');
   var picElement2 = document.getElementById('HTMLImgElement2');
   var temp = picElement1.src;
   picElement1.src = picElement2.src;
   picElement2.src = temp;
}
</script>

在html中只需使用ID HTMLImgElement1和HTMLImgElement2设置2个图像。以及一个带有onclick attr的按钮，它将转发到此功能。