兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)

<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>  

评论

2 楼 coder_hero 2007-09-13  

谢谢fins的指教，你说的很对，还有好多地方是要改正的。

1 楼 fins 2007-09-12  

实现的功能不错
但是离为w3c标准差很多啊 呵呵
没有head 没有body 没有必要的meta
使用  ....
很多问题的 其实

不过 没有head 没有body script乱放 这事最不能容忍了.
为了验证是否符合 你可以去 http://validator.w3.org
或者弄个软件