Question

我正在创建一个脚本，当我选择图像时我会更改图像，但是，我希望能够在特定时间间隔后将这些图像选项重置为原始图像。代码在下面。我有使用setTimer设置的功能，但我觉得我错过了一行。

<!DOCTYPE html>
<html>

<head>
<style>

h1 {
position: absolute;
left: 0px;
top: 0px;
}

h2 {
position: absolute;
left: 10px;
top: 350px;
}
h3 {
position: absolute;
left: 155px;
top: 350px;
}

h4 {
position: absolute;
left: 480px;
top: 347px;
}


h5 {
position: absolute;
left: 335px;
top: 347px;
}
h6 {
position: absolute;
left: 35px;
top: 23px;
}


h7 {
position: absolute;
left: 38px;
top: 302px;
}

h8 {
position: absolute;
left: 162px;
top: 302px;
}


h9 {
position: absolute;
left: 286px;
top: 302px;
}

h10 {
position: absolute;
left: 410px;
top: 302px;
}



h11 {
position: absolute;
left: 547px;
top: 50px;
}

h12 {
position: absolute;
left: 547px;
top: 172px;
}


</style>


</head>

<body>
<script type="text/javascript">
function Reset(form){
form.reset();
}
</script>

<script type="text/javascript">
function changeImg(img, newimg) {
img.src = newimg;
setTimeout("reset",5000);

}
</script>

<h1>
<img src="http://i1065.photobucket.com/albums/u385/jfd7851/NMIS-42-UX100-R01-simple%20BACK%20GROUND_zps5sal2wvc.png" border="0" alt=" photo NMIS-42-UX100-R01-simple BACK GROUND_zps5sal2wvc.png"/></a>
</h1>         

<h2>
<img src="http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20NOT%20AVAILABLE_zpsphausbck.png" border="0" alt=" photo LEFT NOT AVAILABLE_zpsphausbck.png" onclick="changeColor(event);"></a>
</h2>   

<h3><img src="http://i1065.photobucket.com/albums/u385/jfd7851/MANUAL%20NOT%20AVAILABLE_zpshcff1oar.png" border="0" alt=" photo MANUAL NOT AVAILABLE_zpshcff1oar.png"/></a>
</h3>   

<h4><img src="http://i1065.photobucket.com/albums/u385/jfd7851/RIGHT%20SELECTED_zpsfm5vwnr9.png" border="0" alt=" photo RIGHT SELECTED_zpsfm5vwnr9.png"/></a>
</h4>

<h5><img src="http://i1065.photobucket.com/albums/u385/jfd7851/AUTO%20SELECTED_zpsemqkoegv.png" border="0" alt=" photo AUTO SELECTED_zpsemqkoegv.png"/></a>
</h5>

<h6><img src="http://i1065.photobucket.com/albums/u385/jfd7851/RIGHT%20LARGE%20MAT_zpsh3uqhrd6.png" border="0" alt=" photo RIGHT LARGE MAT_zpsh3uqhrd6.png"/></a></h6>

<h7>
<img onclick="changeImg(this, 'http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20INSERT%20SELECTED%201_zpse8cn43hf.png')"src="http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20INSERT%201_zpsoantviyw.png" border="0" alt=" photo LEFT INSERT SELECTED 1_zpse8cn43hf.png"/>"</a></h7>

<h8><img onclick="changeImg(this, 'http://i1065.photobucket.com/albums/u385/jfd7851/RIGHT%20INSERT%20SELECTED%202_zpsiwxrndok.png')"src="http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20INSERT%202_zps4eun1ouk.png" border="0" alt=" photo LEFT INSERT SELECTED 1_zpse8cn43hf.png"/></a></h8>

<h9><img src="http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20INSERT%203_zpsopq4v1w7.png" border="0" alt=" photo LEFT INSERT 3_zpsopq4v1w7.png"/></a></h9>

<h10><img src="http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20INSERT%204_zpsegxrxewq.png" border="0" alt=" photo LEFT INSERT 4_zpsegxrxewq.png"/></a></h10>


<h11><img src="http://i1065.photobucket.com/albums/u385/jfd7851/RIGHT%20INSERT%206_zpszndwmelo.png" border="0" alt=" photo RIGHT INSERT 6_zpszndwmelo.png"/></a></h11>

<h12><img src="http://i1065.photobucket.com/albums/u385/jfd7851/RIGHT%20INSERT%205_zpsx6fnngwi.png" border="0" alt=" photo RIGHT INSERT 5_zpsx6fnngwi.png"/></a></h12>







</p>
</body>

</html>

Answer 1

嗯，发布的代码中没有任何形式。即使有，reset()也只重置表单元素的值。无论如何，为了“重置”一个点击的图像，你可以这样做：

function changeImg(img, newimg) {
    var src = img.src; // Remember the original URL
    img.src = newimg;
    setTimeout(function () {img.src = src; /* Reload the original image */}, 5000);
}

A live demo at jsFiddle

但未来会有一些麻烦，例如如果用户在延迟期间点击图像，会发生什么。如果你使用a proper method to attach event listeners而不是内联处理程序，那么一切都会容易得多。

使用setTimer重置图像（onclick）

1 个答案: