Javascript实现连续滚动的跑马灯，可上下左右滚动

今天在 www.51windows.net上发现一个简单的图片滚动的脚本，写的很不错，我修改了一下，可随意上下左右滚动了

< html >
< head >
< title > 左右滚动的图片效果 - 51windows.Net </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< script  language ="javascript"  src ="js/js.js"  type ="text/javascript" ></ script >
</ head >
< body  bgcolor ="#999999" >

< table  border ="1"  width ="760"  align ="center" >
   < tr >
     < td  width ="215" >
        Scroll Width: < input  type ="text"  size ="5"  name ="scrollWidth" >< BR >
        Offset Width: < input  type ="text"  size ="5"  name ="offsetWidth" >
         </ td >
     < td  width ="545" >
         < div  id ="demo"  style ="overflow:hidden;height:120px;width:543px;" >
         < table  width ="100%"  cellspacing ="0" >
             < tr >
                 < td  id ="demo1" >
                     < table  cellspacing ="2" >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                     </ table >                  </ td >
                 < td  id ="demo2" ></ td >
             </ tr >
         </ table >
         </ div >
         </ td >
   </ tr >
   < tr >
     < td  width ="215" >   </ td >
     < td  width ="545" >
             < div  id ="v1demo"  style ="overflow:hidden;height:120px;width:543px;" >
             < table  width ="100%"  cellspacing ="0" >
                 < tr >
                     < td  id ="v1demo1" >
                         < table  cellspacing ="2" >
                             < tr >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                             </ tr >
                         </ table ></ td >
                     < td  id ="v1demo2"  bgcolor ="#000000" >
                         < table  cellspacing ="2" >
                             < tr >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                             </ tr >
                         </ table >
                     </ td >
                 </ tr >
             </ table >
             </ div >
         </ td >
   </ tr >
   < tr >
     < td  width ="215" >   </ td >
     < td  width ="545" >
             < div  id ="v2demo"  style ="overflow:hidden;height:120px;width:543px;" >
             < table  width ="100%"  cellspacing ="0" >
                 < tr >
                     < td  id ="v2demo1" >
                         < table  cellspacing ="2" >
                             < tr >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                             </ tr >
                         </ table ></ td >
                     < td  id ="v2demo2"  bgcolor ="#FF0000" >
                         < table  cellspacing ="2" >
                             < tr >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                             </ tr >
                         </ table >
                     </ td >
                 </ tr >
             </ table >
             </ div >
         </ td >
   </ tr >
   < tr >
     < td ></ td >
     < td > &nbsp; </ td >
   </ tr >
   < tr >
     < td ></ td >
     < td >
         < table  width ="100%"  border ="0"  cellspacing ="0"  cellpadding ="5" >
       < tr >
         < td >
         < div  id ="hdemo"  style ="overflow:hidden;height:550px;width:190px;" >
         < table  width ="100%"  cellspacing ="0" >
             < tr >
                 < td  id ="hdemo1" >
                     < table  cellspacing ="2" >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                     </ table >
                 </ td >
             </ tr >
             < tr >
                 < td  id ="hdemo2" >
                     < table  cellspacing ="2" >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                     </ table >
                 </ td >
             </ tr >
         </ table >
         </ div >
                 </ td >
         < td >
         < div  id ="h2demo"  style ="overflow:hidden;height:550px;width:190px;" >
         < table  width ="100%"  cellspacing ="0" >
             < tr >
                 < td  id ="h2demo1" >
                     < table  cellspacing ="2" >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                     </ table >
                 </ td >
             </ tr >
             < tr >
                 < td  id ="h2demo2" >
                     < table  cellspacing ="2" >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                     </ table >
                 </ td >
             </ tr >
         </ table >
         </ div >
                 </ td >
       </ tr >
     </ table ></ td >
   </ tr >
</ table >
< script > ...
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee()...{if(demo2.offsetWidth-demo.scrollLeft<=0)...{demo.scrollLeft-=demo1.offsetWidth;}else...{demo.scrollLeft+=2}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() ...{clearInterval(MyMar)}
demo.onmouseout=function() ...{MyMar=setInterval(Marquee,speed)}

//通用上下，左右连续滚动，跑马灯
function MarqueeTest(direct,MainId,contentId,copyId)...{
  var objMain = document.getElementById(MainId);
    var objContent = document.getElementById(contentId);
    var objCopy = document.getElementById(copyId);
    var mainWidth = objMain.offsetWidth
    var contentWidth = objContent.offsetWidth
    var copyWidth = objCopy.offsetWidth;
    var mainHeight = objMain.offsetHeight;
    var contentHeight = objContent.offsetHeight;
    var copyHeight = objCopy.offsetHeight;
    if (direct=="LEFT")...{
        if (copyWidth-objMain.scrollLeft<=0)...{
            objMain.scrollLeft-=contentWidth;
        }else...{
            objMain.scrollLeft+=2;
        }
    }else if (direct=="RIGHT")...{
        if (copyWidth-mainWidth-objMain.scrollLeft>=0)...{
            objMain.scrollLeft=contentWidth + copyWidth - mainWidth;
        }else...{
            objMain.scrollLeft-=2;
        }
    }else if (direct=="UP")...{
        if (copyHeight-objMain.scrollTop<=0)...{
            objMain.scrollTop-=contentHeight;
        }else...{
            objMain.scrollTop+=2;
        }
    }else if (direct=="DOWN")...{
        if (copyHeight-mainHeight-objMain.scrollTop>=0)...{
            objMain.scrollTop=contentHeight + copyHeight - mainHeight;
        }else...{
            objMain.scrollTop-=2;
        }      
    }
}

var v1Scroll = setInterval("MarqueeTest('LEFT','v1demo','v1demo1','v1demo2')",speed);
v1demo.onmouseover=function() ...{clearInterval(v1Scroll)}
v1demo.onmouseout=function() ...{v1Scroll=setInterval("MarqueeTest('LEFT','v1demo','v1demo1','v1demo2')",speed)}

var v2Scroll = setInterval("MarqueeTest('RIGHT','v2demo','v2demo1','v2demo2')",speed);
v2demo.onmouseover=function() ...{clearInterval(v2Scroll)}
v2demo.onmouseout=function() ...{v2Scroll=setInterval("MarqueeTest('RIGHT','v2demo','v2demo1','v2demo2')",speed)}

var h1Scroll = setInterval("MarqueeTest('UP','hdemo','hdemo1','hdemo2')",speed);
hdemo.onmouseover=function() ...{clearInterval(h1Scroll)}
hdemo.onmouseout=function() ...{h1Scroll=setInterval("MarqueeTest('UP','hdemo','hdemo1','hdemo2')",speed)}

var h2Scroll = setInterval("MarqueeTest('DOWN','h2demo','h2demo1','h2demo2')",speed);
h2demo.onmouseover=function() ...{clearInterval(h2Scroll)}
h2demo.onmouseout=function() ...{h2Scroll=setInterval("MarqueeTest('DOWN','h2demo','h2demo1','h2demo2')",speed)}
</ script >
</ body >
</ html >