HTML和Javascript代码:
<img src="imgs/right.gif" id="image_change" onclick="changeImage()"/>
<script>
function changeImage() {
var src = document.getElementById("image_change").src;
var imgsrc = src.substring(src.lastIndexOf("/")+1);
if (imgsrc == "left.gif")
{
document.getElementById("image_change").src = "imgs/right.gif";
alert('if'+document.getElementById("image_change").src);
}
else
{
document.getElementById("image_change").src = "imgs/left.gif";
alert('else'+document.getElementById("image_change").src);
}
}
</script>
当我单击图像时,新图像将在几分之一秒内替换。.我可以通过使用javascript或向其中添加任何CSS类来使图像替换变慢吗?将不胜感激。
最佳答案
您可以使用窗口对象的setTimeout()函数来延迟执行代码。
尝试这个 :
HTML:
<img src="http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg" id="image_change" onclick="changeImage();" />
javaScript:
function changeImage() {
var src = document.getElementById("image_change").src;
var imgsrc = src.substring(src.lastIndexOf("/") + 1);
if (imgsrc == "Cartoon-6.jpg")
{
window.setTimeout(function(){
document.getElementById("image_change").src = "http://topwallpaperswide.com/wp-content/uploads/cartoon-wallpapers-jerry-the-mouse-running-and-shouting-20140823213658-53f9097a18af8.jpg";
//alert('if'+document.getElementById("image_change").src);
}, 1000);
}
else
{
window.setTimeout(function(){
document.getElementById("image_change").src = "http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg";
//alert('else'+document.getElementById("image_change").src);
}, 1000);
}
}
jsFiddle