单击时如何更改图像的 src 并在一段时间后将其 return 更改为原始图像？

Question

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

CSS:

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

next {position: absolute bottom: 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>

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

如果您需要考虑多次点击并仍然 return 原始图像，您将需要更多状态，可以试试这个：

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>

单击时如何更改图像的 src 并在一段时间后将其 return 更改为原始图像？

how to change the src of an image when clicking and it return to the original after some time?

javascript

src

setinterval

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

next {position: absolute bottom: 20px;左：20px}