按下按钮更改图像

Question

我想通过使用按钮将我的图像更改为gif，这部分代码我已经工作了。
但是现在他们让我用第二个按钮将gif改回到上一个图像（我们称之为停止按钮）。

这是我到目前为止的代码：

<script>
function pictureChange()
{
document.getElementById("theImage").src="http://www.animaties.com/data/media/194/vis-bewegende-animatie-0135.gif";
}
</script>
<body>
<img id="theImage" src="http://www.pastasite.nl/file/2011/11/vis.jpg">
<p><input type="button" id="theButton" value="click me!" onclick="pictureChange()"></p>
</body>

这些图像仅作为示例。

Answer 1

只要else条件

 function pictureChange() { if (document.getElementById("theImage").src == "http://www.pastasite.nl/file/2011/11/vis.jpg") { document.getElementById("theImage").src = "http://www.animaties.com/data/media/194/vis-bewegende-animatie-0135.gif"; } else { document.getElementById("theImage").src = "http://www.pastasite.nl/file/2011/11/vis.jpg"; } }

 <img id="theImage" src="http://www.pastasite.nl/file/2011/11/vis.jpg"> <p> <input type="button" id="theButton" value="click me!" onclick="pictureChange()"> </p>

Answer 2

在更改src之前，将原始src保存在数据属性中

 function pictureChange() { var elem = document.getElementById("theImage"); if (!elem.getAttribute("data-origsrc")) { elem.setAttribute("data-origsrc", elem.getAttribute('src')); } elem.src = "http://www.animaties.com/data/media/194/vis-bewegende-animatie-0135.gif"; } function revert() { var elem = document.getElementById("theImage"); elem.src = elem.getAttribute("data-origsrc"); }

 <img id="theImage" src="http://www.pastasite.nl/file/2011/11/vis.jpg"> <p> <input type="button" id="theButton" value="click me!" onclick="pictureChange()"> <input type="button" value="stop" onclick="revert()"> </p>

按下按钮更改图像

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-05-23 08:39:18

解决方案2
0 2016-05-23 08:47:08

按下按钮更改图像

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-05-23 08:39:18

解决方案2 0 2016-05-23 08:47:08

解决方案1
0 已采纳 2016-05-23 08:39:18

解决方案2
0 2016-05-23 08:47:08