横纵方向走马灯滚动，纯javascript代码

<body onload="beginmarquee()">
<table width="1024" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200"><div id="demo" style="overflow:hidden;200px; height:100px">
        <div id="demo1">
        <img src="1.jpg" width="200" height="200" />
        <img src="2.jpg" width="200" height="200" />
        <img src="3.jpg" width="200" height="200" />
        <img src="4.jpg" width="200" height="200" />
        <img src="5.jpg" width="200" height="200" />
        <img src="6.jpg" width="200" height="200" />
        </div>   
        <div id="demo2"></div> 
    </div></td>
    <td>&nbsp;</td>
  </tr>
</table>
<div id="showtest">此处显示  id "showtest" 的内容</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
                <script>
var speed=12
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
{
demo.scrollTop++
}
}

var MyMar
function beginmarquee()
{
  MyMar=setInterval(Marquee,speed)
}

function endmarquee()
{
 clearInterval(MyMar)
}

//var MyMar=setInterval(Marquee,speed)
//demo.onmouseover=function() {clearInterval(MyMar)}
//demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
              </script> 
</body>










<body>
<style type="text/css">
<!--
.zhengti{969px; height:180px; background-image:url(c-gd.gif);}
#demo {overflow:hidden;border: 1px dashed #CCC; 920px; margin-left:25px; padding-top:18px;}
#demo img {border: 1px solid #F2F2F2;}
#indemo {float: left; 800%;}
#demo1 {float: left;}
#demo2 {float: left;margin-left:8px;}
-->
</style>
<div class="zhengti">
    <div id="demo">
        <div id="indemo">
            <div id="demo1">
            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>
            <a href="#"><img src="shiyan.jpg" border="0" height="140"/></a>
            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>
            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>
            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>
            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>
            </div>
            <div id="demo2"></div>
        </div>
    </div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
 if(tab2.offsetWidth-tab.scrollLeft<=0)
 tab.scrollLeft-=tab1.offsetWidth
 else{
 tab.scrollLeft++;
 }
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>