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>

 

 

posted @ 2010-09-18 17:23  黄靖洆  阅读(6326)  评论(1编辑  收藏  举报