Javascript 如何在单击时更改图像的src，并在一段时间后恢复到原始状态？

我有一个页面，在单击图像按钮（下一个和上一个）时显示几个隐藏的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>

内容1
内容2
函数替换（）{
document.getElementById（“div1”）.style.display=“无”；
document.getElementById（“div2”）.style.display=“block”；
setInterval（函数（）{
让originalSrc=$（'hdnPreviousPng'）.val（）；
$（'next'）.attr（'src'，originalSrc）；
}, 3000); 
}
函数replace2（）{
document.getElementById（“div2”）.style.display=“无”；
document.getElementById（“div1”）.style.display=“block”；
setInterval（函数（）{
让originalSrc=$（'hdnPreviousPng'）.val（）；
$（'next'）.attr（'src'，originalSrc）；
}, 3000); 
}

您可以使用一个简单的数据属性来存储一些状态，并交换图像源标记

下面是一个使用JavaScript的示例：

单击函数（）{
替换（）；
设置超时（替换，1000）；
}
函数替换（）{
var next=document.getElementById（“next”）.getAttribute（“数据img src”）；
var current=document.getElementById（“next”）.src；
document.getElementById（“next”）.setAttribute（“数据img src”，当前）；
document.getElementById（“next”）.src=next；
}

您可以创建类型为hidden的输入元素，并将原始src值存储在隐藏元素的value属性中，然后为隐藏元素提供与各自img相关的id或类，然后在setInterval（）中获取隐藏元素的值请用它来重置你的img srcPost你的代码。@RyanWilson我听不懂….@Adam Azad，post！@ThiagoSoubra我会用一个例子来回答我的意思。