一个Javascript 图片滚动类

// SDGlobal.js

//  JScript File 

var  g_numSeed  =   1 ;
var  g_strSeed  =   " sdbTTzyxdsY " ; 

function  SD_GetRandomStr()
... {
    var name = g_strSeed;
    name += g_numSeed;
    
    g_numSeed++;
    return name;
}  

/**/ /* 图片滚动类
   注意： 所有图片的总高度要大于显示框的高度，才会滚动
   list 参数采用json 样式："({img:'http://klas.cuit.edu.cn/link_pic/banner1.gif',url:'http://www.cdyw.org'})"
*/
function  SDImageScroll( hostT, width, height, list)
... {
    this.speed = 30;
    this.width = width;
    this.height = height;
    this.szDiv0 = SD_GetRandomStr();
    this.szDiv1 = SD_GetRandomStr();
    this.szDiv2 = SD_GetRandomStr();
    
        
    var pNode = document.getElementById( hostT);
    
    /////
    var divT = document.createElement("div");
    divT.id = this.szDiv0;
    divT.style.overflow = "hidden";
    divT.style.height = this.height;  
    divT.style.width = this.width; 
    divT.style.background="#214984";
    divT.style.color = "#ffffff";
    
    var div1 = document.createElement("div");
    div1.id = this.szDiv1;
    
    for(p=0; p<list.length; p++)
    ...{
        var listItem = eval(list[p]);
    
        var linka = document.createElement("a");
        linka.href = listItem.url;
    
        var Img = new Image();
        Img.src = listItem.img;
        
        linka.appendChild(Img);
        div1.appendChild( linka );    
    }    
    
    var div2 = document.createElement("div");
    div2.id = this.szDiv2;    
    //debugger;
    ///
    divT.appendChild( div1 );
    divT.appendChild( div2 );
    pNode.appendChild( divT ); 

    div2.innerHTML = div1.innerHTML;
    divT.scrollTop = divT.scrollHeight;
} ; 


SDImageScroll.prototype.start  =   function ( speed )
... {
    this.speed = speed;
    var div = document.getElementById( this.szDiv0 );
    var div1 = document.getElementById( this.szDiv1 );    
    var div2 = document.getElementById( this.szDiv2 );  
    
    var me = this; 

    this.MarqueeT = function()...{
        var div = document.getElementById( me.szDiv0 );
        var div1 = document.getElementById( me.szDiv1 );    
        var div2 = document.getElementById( me.szDiv2 );    

       if(div1.offsetTop - div.scrollTop >= 0)
            div.scrollTop += div2.offsetHeight;
        else
            div.scrollTop--;
    } 

    div.onmouseover = function() ...{ 
        clearInterval( me.MyMar);
    }
    div.onmouseout = function() ...{ 
        me.MyMar = setInterval(me.MarqueeT,me.speed);
    }
    
    this.MyMar = setInterval( this.MarqueeT, this.speed);     
}  

 

//  测试HTML

 

< html >
< head >  

< script  language ="javascript"  src ="../js/SDGlobal.js" ></ script >
< script  language ="javascript"  type ="text/javascript" > ...  

    function Load()
    ...{
        var imglist = new Array();
        imglist[0] = "({img:'http://klas.cuit.edu.cn/link_pic/banner1.gif',url:'http://www.cdyw.org'})";
        imglist[1] = "({img:'http://klas.cuit.edu.cn/link_pic/banner2.gif',url:'http://www.cdyw.org'})";
        imglist[2] = "({img:'http://klas.cuit.edu.cn/link_pic/banner3.gif',url:'http://www.cdyw.org'})";
        imglist[3] = "({img:'http://klas.cuit.edu.cn/link_pic/banner4.gif',url:'http://www.cdyw.org'})"; 

        var imgscr = new SDImageScroll("ilink",150,60, imglist);    
        imgscr.start(40);
    } 

</ script >  
</ head >
< body  onload ="Load()" >
<!--  滚动图片实例  -->
< p > 图片滚动实例 </ p >
< div  id ="ilink" >
</ div >
< hr />  
</ body >
</ html >