【问题标题】：how to change the src of an image when clicking and it return to the original after some time?单击时如何更改图像的src并在一段时间后返回原始图像？
【发布时间】：2018-02-26 03:04:59
【问题描述】：

单击图像按钮（下一个和上一个）时，我有一个页面会显示几个隐藏的 div。有时它的内容需要几秒钟才能正确显示，所以我想到了稍微延迟功能以“给时间”让内容“准备”。而那个时候图像交换了一个gif。我已经开始并看到它有效，我用tris.src 有一个简单的方法来更改img 和setInterval 的延迟，直接在我的onclick="" 上，但我需要原始图像自动返回到2 或 3 秒后原始，因为它可以再次显示（单击上一个按钮时）并且不再是 gif！并且不知道该怎么做。你能帮帮我吗？

CSS：

div1, #div2 {宽度：100px;高度：100px；背景：黄色；位置：相对；

下一个{位置：绝对底部：20px；左：20px}

} HTML & JS：

<div id="div1">
    content1
    <img src="next.png" id="next" onclick="setTimeout(replace, 1000); this.src='prev.png'">
    <input type="hidden" value="prev.png" id="hdnPreviousPng" />
</div>

<div id="div2" style="display: none">content2
    <img src="next.png" id="next" onclick="setTimeout(replace2, 1000); this.src='prev.png'">
    <input type="hidden" value="prev.png" id="hdnPreviousPng" />
</div>

<script>
    function replace() { 
        document.getElementById("div1").style.display="none"; 
        document.getElementById("div2").style.display="block";
        setInterval(function(){
             let originalSrc = $('#hdnPreviousPng').val();
             $('#next').attr('src', originalSrc);

        }, 3000); 
    }
    function replace2() { 
        document.getElementById("div2").style.display="none"; 
        document.getElementById("div1").style.display="block";
        setInterval(function(){
             let originalSrc = $('#hdnPreviousPng').val();
             $('#next').attr('src', originalSrc);
    
        }, 3000); 
    }
</script>

【问题讨论】：

您可以创建类型为 hidden 的输入元素并将原始 src 值存储在隐藏元素的 value 属性中，然后为您的隐藏元素提供一些 id 或将它们与各自的 img 相关联的类，然后在 setInterval() 中获取隐藏元素的值并使用它来重置您的 img src
请发布您的代码。
@RyanWilson 我听不懂....
@Adam Azad，已发布！
@ThiagoSoubra 我将发布一个示例来说明我的意思。

标签： javascript setinterval src

【解决方案1】：

您可以只使用一个简单的数据属性来存储一些状态并换入和换出图像源标签。

这是一个使用 JavaScript 的示例：

function clicked() {
  replace();
  setTimeout(replace, 1000);
}

function replace() {
  var next = document.getElementById("next").getAttribute("data-img-src");
  var current = document.getElementById("next").src;

  document.getElementById("next").setAttribute("data-img-src", current);
  document.getElementById("next").src = next;
}

<div id="div1">
  <img id="next" src="http://via.placeholder.com/100?text=first" data-img-src="http://via.placeholder.com/100?text=second" onclick="clicked();">
</div>

如果您需要考虑多次点击并仍然返回原始图像，您将需要更多状态，可以尝试以下操作：

function clicked() {
  replace();
  setTimeout(replaceOriginal, 1000);
}

function replace() {
  var next = document.getElementById("next").getAttribute("data-img-src");

  document.getElementById("next").src = next;
}

function replaceOriginal(){
  var original = document.getElementById("next").getAttribute("data-img-original");

  document.getElementById("next").src = original;
}

<div id="div1">
  <img id="next" src="http://via.placeholder.com/100?text=first" data-img-original="http://via.placeholder.com/100?text=first" data-img-src="http://via.placeholder.com/100?text=second" onclick="clicked();">
</div>

【讨论】：