用另一个图像替换图像，然后在超时后再次替换-Javascript

我正在努力做到以下几点：

单击，将图像1替换为图像2，然后在5秒钟后，再次将图像2替换为图像1

图像1被图像2替换，但我的问题是它在超时后不会恢复

这是我的密码：

<img id="loadimg" style="display:none;" src="images/Loader.gif" width="140" height="30" />

<script type="text/javascript" language="javascript">

function showLoad(){
    document.getElementById('Generate1').src=document.getElementById('loadimg').src;
    setTimeout(showCode(), 5000);
}

function showCode(){
    document.getElementById('loadimg').src=document.getElementById('Generate1').src;
}

</script>

 <td colspan="3" rowspan="3"><img src="images/BUTTON.gif" alt="" name="Generate1" width="168" height="40" id="Generate1" onClick="showLoad()"></td>

函数showLoad（）{
document.getElementById（'Generate1'）.src=document.getElementById（'loadimg'）.src；
设置超时（showCode（），5000）；
}
函数showCode（）{
document.getElementById（'loadimg'）.src=document.getElementById（'Generate1'）.src；
}

---

感谢您的帮助。

您必须使用id

Generate1

处理同一图像，并将初始图像

src

存储在temp值中（例如

var-image

）：

---

您必须使用id

Generate1

对同一图像进行寻址，并将初始图像

src

存储在temp值中（例如

var-image

）：

---

您不希望运行

showCode

并将结果传递给

setTimeout

，而是希望将函数本身作为参数传递给

setTimeout

，以便可以回调：

setTimeout(showCode, 5000);

另外，当您将

document.getElementById（'loadimg'）.src

分配给

document.getElementById（'Generate1'）.src

时，执行相反操作不会改变任何内容。您需要将原始数据保存在变量中。您也可以将元素保存在变量中：

var Generate1 = document.getElementById('Generate1');
var loadimg = document.getElementById('loadimg');
var originalSrc = Generate1.src;

function showLoad() {
    Generate1.src = loadimg.src;
    setTimeout(showCode, 5000);
}

function showCode() {
    loadimg.src = originalSrc;
}

---

您不希望运行

showCode

并将结果传递给

setTimeout

，而是希望将函数本身作为参数传递给

setTimeout

，以便可以回调：

setTimeout(showCode, 5000);

另外，当您将

document.getElementById（'loadimg'）.src

分配给

document.getElementById（'Generate1'）.src

时，执行相反操作不会改变任何内容。您需要将原始数据保存在变量中。您也可以将元素保存在变量中：

var Generate1 = document.getElementById('Generate1');
var loadimg = document.getElementById('loadimg');
var originalSrc = Generate1.src;

function showLoad() {
    Generate1.src = loadimg.src;
    setTimeout(showCode, 5000);
}

function showCode() {
    loadimg.src = originalSrc;
}

---

这是因为旧的图像正在被新的图像“碾压”。你可以这样做：

var pathToGenerateImg = "..."; // path to generate
var pathToLoadImg = "..."; // path to load img

function showLoad(){
    document.getElementById('Generate1').src = pathToLoadImg;
    setTimeout(showCode, 5000);
}

function showCode(){
    document.getElementById('Generate1').src = pathToGenerateImg ;
}

---

在这种情况下，您只需要一个

容器（带有

id=“Generate1”

），因为所有路径都存储在变量中。

这是因为旧图像正在被新图像“覆盖”。你可以这样做：

var pathToGenerateImg = "..."; // path to generate
var pathToLoadImg = "..."; // path to load img

function showLoad(){
    document.getElementById('Generate1').src = pathToLoadImg;
    setTimeout(showCode, 5000);
}

function showCode(){
    document.getElementById('Generate1').src = pathToGenerateImg ;
}

在这种情况下，您只需要一个

容器（带有

id=“Generate1”

），因为所有路径都存储在变量中