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条件

＆＃13;

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";
  }
}

＆＃13;

<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>

＆＃13;

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 个答案: