JS图片左右无缝隙滚动(兼容IE,Firefox 遵循W3C标准)

   **兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)
  **
  **实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，
  **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，
  **因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

<! 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  id ="Head1"  runat ="server" >
   < title ></ title >
</ head >
< body >
   < img  src ="link.gif"  style ="cursor: pointer"  onmouseover ="clearright();toleft()"   />
   < img  src ="link1.gif"  style ="cursor: pointer"  onmouseover ="clearleft();toright()"   />
   < div >
     < div  id ="demo"  style ="overflow: hidden; width: 322px; height: 61px" >
       < 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 ="link.gif"   />
                     </ td >
                     < td  width ="50"  height ="50" >
                       < img  height ="50"  src ="link1.gif"   />
                     </ td >
                     < td  width ="50"  height ="50" >
                       < img  height ="50"  src ="link2.gif"   />
                     </ td >
                     < td  width ="50"  height ="50" >
                       < img  height ="50"  src ="link.gif"   />
                     </ td >
                     < td  width ="50"  height ="50" >
                       < img  height ="50"  src ="link3.gif"   />
                     </ td >
                   </ tr >
                 </ tbody >
               </ table >
             </ td >
             < td  id ="demo2"  valign ="top" >
             </ td >
           </ tr >
         </ tbody >
       </ table >
     </ div >
   </ div >
   < div >
     < div  id ="demo_a"  style ="overflow: hidden; width: 322px; height: 61px" >
       < 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 ="link.gif"   />
                     </ td >
                     < td  width ="50"  height ="50" >
                       < img  height ="50"  src ="link1.gif"   />
                     </ td >
                     < td  width ="50"  height ="50" >
                       < img  height ="50"  src ="link2.gif"   />
                     </ td >
                     < td  width ="50"  height ="50" >
                       < img  height ="50"  src ="link.gif"   />
                     </ td >
                     < td  width ="50"  height ="50" >
                       < img  height ="50"  src ="link3.gif"   />
                     </ td >
                   </ tr >
                 </ tbody >
               </ table >
             </ td >
             < td  id ="demo_c"  valign ="top" >
             </ td >
           </ tr >
         </ tbody >
       </ table >
     </ div >
   </ div >
   < 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 >
</ body >
</ html >