marquee无缝隙循环总结

marquee无缝隙循环总结
近日研究marquee无缝隙循环，有些心得
因为是初学JS 所以从网上找了不少别人的例子
我发现了一下问题
1.大多数html代码不符合W3C的最新标准。
2.很多代码移植性太差。
3.向左循环的时候。除用表格方式外，必须固定宽度，这样就不能动态的添加图片了。
基于以上我修改了代码但愿能给大家带来方便。
一、向左循环代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<div id="demo" style="overflow:hidden;height:80px;width:200px;">
    <div id="demo1" style="float:left;">
        <img src="a.jpg" style="float:left;width:100px;"/>
        <img src="b.jpg" style="float:left;width:100px;"/>
        <img src="c.jpg" style="float:left;width:100px;"/>
        <img src="d.jpg" style="float:left;width:100px;"/>
    </div>
</div>
<script type="text/javascript">
var domo1 = document.getElementById("demo1");
var domo = document.getElementById("demo");
var imgs = domo1.getElementsByTagName("img");
var n = imgs.length;
var width = n * 100;
width = width + "px";
domo1.style.width = width;
alert(width);
var speed=30;
demo1.innerHTML=demo1.innerHTML+demo1.innerHTML;
function Marquee()
{
    if(demo1.offsetWidth/2-demo.scrollLeft<=0){
        demo.scrollLeft-=demo1.offsetWidth/2;
    }else
    {
        demo.scrollLeft++;
    }
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function(){clearInterval(MyMar)};
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)};
</script>
</body>
</html>二、向左循环(用表格布局)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<table width="800px"  border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td><DIV id=demo style="OVERFLOW: hidden; WIDTH:800px;TEXT-ALIGN:center;COLOR: #cccccc; HEIGHT: 90px">
<table border="0" align="left" cellPadding="0" cellspacing="0" cellspace="0">
<tr>
<td id=demo1 vAlign=top>
<table style="width:600px; height:90px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/pic/pic1.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic2.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic3.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic4.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic5.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic6.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic6.jpg" width="150px" height="113px"></td>
<td> </td>
</tr>
</table>
</td>
<td id=demo2 vAlign=top></td>
</tr>
</table>
  </DIV>
  <SCRIPT>
  var speed=12
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
  if(demo2.offsetLeft-demo.scrollLeft<=0)
  demo.scrollLeft-=demo1.offsetWidth
  else{
  demo.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function() {clearInterval(MyMar)}
  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  </SCRIPT>
</td>
<td> </td>
</tr>
</table>
</body>
</html>三、向上循环（应为不考虑浮动的原因向上循环很简单）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<div id=demo style="overflow:hidden;height:200px;width:100px">     
    <div id=demo1>   
        <img src="a.jpg" width="100px"/>
        <img src="b.jpg" width="100px"/>
        <img src="c.jpg" width="100px"/>
        <img src="d.jpg" width="100px"/>
    </div>   
    <div id=demo2></div>   
</div>
<script type="text/javascript">  
var domo1 = document.getElementById("demo1");
var domo2 = document.getElementById("demo2");
var domo = document.getElementById("demo"); 
var speed=30   
demo2.innerHTML=demo1.innerHTML   
function Marquee()   
{
    if(demo2.offsetTop-demo.scrollTop<=0)   
    demo.scrollTop-=demo1.offsetHeight   
    else   
    {   
        demo.scrollTop++;   
    }   
}   
var MyMar=setInterval(Marquee,speed)   
demo.onmouseover=function(){clearInterval(MyMar)}   
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}   
</script>
</body>
</html>