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中，只需设置2个ID为HTMLImgElement1和HTMLImgElement2的图像。以及带有onclick属性的按钮，该按钮将转发至此功能。

通过使用javascript单击HTML来更改图片服务器时间

2 个答案: