Смена картинок при наведении курсора

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>    
    $(document).ready(function() {
        var iid;    
        var imgSrc = ["1.jpg", "2.jpg", "3.jpg"];
        var curImg = 0;                
        
        $("#display").bind('mouseover', function() {            
            iid = setInterval(function() {                
                curImg < imgSrc.length-1 ? ++curImg : curImg = 0;                
                $("#display").attr("src", imgSrc[curImg]);                                
            }, 1800);                    
        });
        
        $("#display").bind('mouseout', function() { clearInterval(iid); curImg = 0; this.src=imgSrc[0]});                
    });
</script>
</head>
<body> 
    
<img width="400px" id="display" src="1.jpg"/><br/>
</body> 
</html>

<script>(function(){
var d, allSrc, len, obj, ind, stop;
d=document;
allSrc=['pics/avant48.gif', 'pics/chrome48.gif', 'pics/firefox48.gif', 'pics/ie48.gif', 'pics/navigator48.gif', 'pics/nichrom48.gif', 'pics/opera48.gif', 'pics/safari48.gif', 'pics/yandex48.gif'];
len=allSrc.length;
ind=0;
 
onload=function(){
var el=d.getElementById("multiImg");
obj=el.getElementsByTagName("img")[0];
el.onmouseover=over;
el.onmouseout=out;
 };
 
function over(){
ind=ind+1==len?0:ind+1;
obj.src=allSrc[ind];
stop=setTimeout(over, 500);
 
 };
 
function out(){
clearTimeout(stop);
obj.src=allSrc[0];
 };
 
 })();</script>

<a name="#" id="multiImg"><img src="pics/avant48.gif" alt=""></a>