符合W3C Web标准的图片连续无间隙水平滚动

这次又遇上一个这样的问题，找了老半天终于从网上找到一个不错的，看了下代码，思路很简单，但代码太多，通用性也不行，于是乎，自己又发明了两个函数，用起来感觉还真不错，与大家共享：

<！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> <title>图片连续无间隙向左滚动，无间隙向右滚动，符合W3C Web标准_</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body><table cellpadding="0" align="left" border="0" cellspace="0"> <tr> <td id="demo1" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tr align="center"> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> </tr> </table></td> <td id="demo2" valign="top"></td> </tr> </table> <table cellpadding="0" align="left" border="0" cellspace="0"> <tr> <td id="demo11" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tr align="center"> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> </tr> </table></td> <td id="demo22" valign="top"></td> </tr> </table><script type="text/javascript" language="JavaScript"> //调用向左滚动 toleft（"demo","demo1","demo2",30,"hehe123"） //调用向右滚动 toright（"demo0","demo11","demo22",20,"hehe1123"） function $（id）{return document.getElementById（id）} //向左滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。 //by 柳永法（yongfa365）"Blog www.yongfa365.com function toleft（demo,demo1,demo2,speed,flag）{ demo=$（demo）;demo1=$（demo1）;demo2=$（demo2） demo2.innerHTML=demo1.innerHTML function Marquee（）{ if（demo2.offsetWidth-demo.scrollLeft<=0）{ demo.scrollLeft-=demo1.offsetWidth } else{ demo.scrollLeft++ } } flag=setInterval（Marquee,speed） demo.onmouseover=function（）{clearInterval（flag）;} demo.onmouseout=function（）{flag=setInterval（Marquee,speed）;} } //向右滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。 //by 柳永法（yongfa365）"Blog www.yongfa365.com function toright（demo,demo1,demo2,speed,flag）{ demo=$（demo）;demo1=$（demo1）;demo2=$（demo2） demo2.innerHTML=demo1.innerHTML function Marquee（）{ if（demo.scrollLeft<=0）{ demo.scrollLeft=demo2.offsetWidth } else{ demo.scrollLeft-- } } flag=setInterval（Marquee,speed） demo.onmouseover=function（）{clearInterval（flag）;} demo.onmouseout=function（）{flag=setInterval（Marquee,speed）;} } </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
以下为网上提供的代码

<！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> <title>Untitled Document</title> </head> <body> <img src="images/butt_arrowl.gif" style="cursor:pointer" onmouseover="clearright（）;toleft（）"/> <img src="images/butt_arrowr.gif"style="cursor:pointer" onmouseover="clearleft（）;toright（）"/> <table cellpadding="0" align="left" border="0" cellspace="0"> <tbody> <tr> <td id="demo1" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tbody> <tr align="center"> <td width="50" height="50"><img height="50" src="images/photo_small01.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small02.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small03.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small06.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small05.jpg" /> </td> </tr> </tbody> </table></td> <td id="demo2" valign="top"></td> </tr> </tbody> </table> <table cellpadding="0" align="left" border="0" cellspace="0"> <tbody> <tr> <td id="demo_b" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tbody> <tr align="center"> <td width="50" height="50"><img height="50" src="images/photo_small04.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small07.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small08.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small09.gif" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small01.jpg" /> </td> </tr> </tbody> </table></td> <td id="demo_c" valign="top"></td> </tr> </tbody> </table> </body> </html> <script type="text/javascript"> /* **兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）（本示例为上下两行图片进行双行滚动） ** **实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆， **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置， **因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到"无缝"滚动的目的。 */ var speed1=0//图片左移的速度 var MyMar1//setInterverval方法返回的间隔ID,些ID为全局的调用次数（用于第一行图片） var MyMar2//setInterverval方法返回的间隔ID,些ID为全局的调用次数（用于第二行图片） var lefthit=0//记录左移按钮点击次数 var righthit=0////记录右移按钮点击次数 //调用右移方法前,先让左移停止（clearInterval清除setInterval对方法的调用） function clearleft（）{ clearInterval（MyMar1） clearInterval（MyMar2） } //图片左移的方法 function toleft（）{ //判断是否是第一次按下左移按钮（图片往左开始移动的时候，不会在调用此方法。只有当按了右移按钮时，才会把lefthit重设为0） if（lefthit==0）{ speed1=30;//图片左移速度时间毫秒 //让的内容demo2与demo1内容一样 document.getElementById（"demo2"）.innerHTML=document.getElementById（"demo1"）.innerHTML //上行图片移动的方法 function Marquee1（）{ //当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等 if（document.getElementById（"demo2"）.offsetWidth-document.getElementById（"demo"）.scrollLeft<=0）{ //demo跳回初始位置 document.getElementById（"demo"）.scrollLeft-=document.getElementById（"demo1"）.offsetWidth } else{ //demo开始重新移动 document.getElementById（"demo"）.scrollLeft++ } } //setInterval让Marquee1方法每隔多少秒执行一次，并把返回的调用次数ID MyMar1=setInterval（Marquee1,speed1） //当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止 document.getElementById（"demo"）.onmouseover=function（） {clearInterval（MyMar1）;clearInterval（MyMar2）} //当鼠标移除demo时,重新setInterval让方法执行，这样图片会继续移动 document.getElementById（"demo"）.onmouseout=function（） {MyMar1=setInterval（Marquee1,speed1）;clearInterval（MyMar2）;MyMar2=setInterval（Marquee2,speed1）} //下面的方法与上面的方法一样，用于第二行的图片向左移动 document.getElementById（"demo_c"）.innerHTML=document.getElementById（"demo_b"）.innerHTML function Marquee2（）{ if（document.getElementById（"demo_c"）.offsetWidth-document.getElementById（"demo_a"）.scrollLeft<=0）{ document.getElementById（"demo_a"）.scrollLeft-=document.getElementById（"demo_b"）.offsetWidth} else{ document.getElementById（"demo_a"）.scrollLeft++ } } MyMar2=setInterval（Marquee2,speed1） document.getElementById（"demo_a"）.onmouseover=function（） {clearInterval（MyMar2）;clearInterval（MyMar1）} document.getElementById（"demo_a"）.onmouseout=function（） {MyMar2=setInterval（Marquee2,speed1）; document.getElementById（"demo"）.onmouseout（）} lefthit=1//设置左移按钮，当按了一次左移后（不管按多少次），在没按右移按钮之前，toleft方法里的的代码不会再被执行 righthit=0//把右移按钮设为0,这样当下次点了右移按钮的时候，以便toright方法被调用 } } var MyMar3//setInterverval方法返回的间隔ID,些ID为全局的调用次数（用于第一行图片） var MyMar4//setInterverval方法返回的间隔ID,些ID为全局的调用次数（用于第二行图片） var speed2=0//图片右移的速度 //调用移左方法前,先让右移停止（clearInterval清除setInterval对方法的调用） function clearright（）{ clearInterval（MyMar3） clearInterval（MyMar4） } //图片右移方法（与图片左移方法思路一样） function toright（）{ //判断是否是第一次按下右移按钮（图片往右开始移动的时候，不会在调用此方法。只有当按了左移按钮时，才会把righthit重设为0） if（righthit==0）{ speed2=30; document.getElementById（"demo2"）.innerHTML=document.getElementById（"demo1"）.innerHTML function Marquee_a（）{ if（document.getElementById（"demo"）.scrollLeft<=0）{ document.getElementById（"demo"）.scrollLeft=document.getElementById（"demo2"）.offsetWidth } else{ document.getElementById（"demo"）.scrollLeft-- } } MyMar3=setInterval（Marquee_a,speed2） document.getElementById（"demo"）.onmouseover=function（） {clearInterval（MyMar3）;document.getElementById（"demo_a"）.onmouseover（）} document.getElementById（"demo"）.onmouseout=function（） {MyMar3=setInterval（Marquee_a,speed2）;clearInterval（MyMar4）;MyMar4=setInterval（Marquee_b,speed2）} document.getElementById（"demo_c"）.innerHTML=document.getElementById（"demo_b"）.innerHTML function Marquee_b（）{ if（document.getElementById（"demo_a"）.scrollLeft<=0）{ document.getElementById（"demo_a"）.scrollLeft=document.getElementById（"demo_c"）.offsetWidth } else{ document.getElementById（"demo_a"）.scrollLeft-- } } MyMar4=setInterval（Marquee_b,speed2） document.getElementById（"demo_a"）.onmouseover=function（） {clearInterval（MyMar4）;clearInterval（MyMar3）} document.getElementById（"demo_a"）.onmouseout=function（） {MyMar4=setInterval（Marquee_b,speed2）;document.getElementById（"demo"）.onmouseout（）} righthit=1//设置右移按钮，当按了一次右移按钮后（不管按多少次），在没按左移按钮之前，toright方法里的的代码不会再被执行 lefthit=0//把左移按钮设为0,这样当下次点了左移按钮的时候，以便toleft方法被调用 } } </script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]