图片无缝连接的问题

function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
这一段给怎么理解呢、、、、

解决方案 »

  1.   

    看图片说明，黑框表示dome，也就是可视区域，当dome1的高度大于dome时才可以做滚动，否则会出错。然后dome1复制一个dome2到屁股里。原理就是dome向上滚动【scrollTop】当滚动到高度与dome1高度一样时，dome1又返回开始位置，就这样反反复复。而dome.height=dome2.soffsetTop=dome1.offsetHeight 所以用 if(dome2.offsetTop-dome.scrollTop<=0)表示dome1已经刚刚完全滚动到上面不可视区域，所以马上执行dome.scrollTop=0【dome.scrollTop-=dome1.offsetHeight，其实就是dome.scrollTop=0】，如果没达到就dome.scrollTop=dome.scrollTop+1【简写成dome.scrollTop++】一点点往上滚...原帖http://topic.csdn.net/u/20120911/19/90ac6651-f638-4fa7-b226-20b826816a1b.html
      

  2.   

    你的是scrollLeft与scrollTop原理一样。一个是左，一个是上
      

  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=utf-8"/>
    <titel>图片无缝滚动</titel>
    </head>
    <body>
    <style type="text/css">
    #demo {
    border:1px dashed #fda;
    background-color: #fff;
    overflow: hidden;
    width:500px; 
    }
    #demo img{
    border:1px dotted #cca;
    float: left;
    }
    #indemo {
    float:left;
    width:800%;
    }
    #demo1{
    float:left;
    }
    #demo2{
    float:left;
    }
    </style>
    <div id="demo">
    <div id="indemo">
    <div id="demo1">
    <a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall7.jpg"/></a>
    <a><img src="http://www.codefans.net/jscss/demoimg/wall5.jpg"/></a>
    <a><img src="http://www.codefans.net/jscss/demoimg/wall3.jpg"/></a>
    <a><img src="http://www.codefans.net/jscss/demoimg/wall4.jpg"/></a>
    </div>
    <div id="demo2">
    </div>
    </div>
    <script>
    var speed=10;
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML;
    function Marquee(){
    if(tab2.offsetWidth-tab.scrollLeft<=0)
    {
    tab.scrollLeft-=tab1.offsetWidth;
    }
    else
    {
    tab.scrollLeft++;
    }
    }
    var gunI=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(gunI);}
    tab.onmouseout=function() {gunI=setInterval(Marquee,speed);}
    </script>
    </body>
    </html>