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

10-05 20:40
查看更多