想实现图片横向连续滚动，看看我的代码错在什么地方


<html>
<head>
</head>
<style type="text/css">
body{
margin:0;
}
.w960{
width:960px;
}
.center{
margin:0 auto;
}
.clear{
overflow:hidden;
}
#outbox{
border:1px solid #ff0000;
width:1000%;
padding:3px;
}
#innerbox1,#innerbox2{
float:left;
border:1px solid #1a3b6c;
}
.imgunit{
width:170px;
height:145px;
  float:left;
background:#3e6fb2;
margin:2 2px;
color:#FFFFFF;
}
</style>
<script type="text/javascript">
function scrollImgLeft(){
var speed = 5;
var outbox = document.getElementById("outbox");
var innerbox1 = document.getElementById("innerbox1");
var innerbox2 = document.getElementById("innerbox2");
innerbox2.innerHTML=innerbox1.innerHTML;
function Marquee(){
if(innerbox1.offsetWidth-outbox.scrollLeft<=0)
{
outbox.scrollLeft-=innerbox1.offsetWidth;
}
else
{
   outbox.scrollLeft++;
   }
}
  var MyMar=setInterval(Marquee,speed);
  outbox.onmouseover=function() {clearInterval(MyMar);}
  outbox.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
}
</script>
<body>
<div class="w960 center clear">
<div id="outbox">
<div id="innerbox1">
<div class="imgunit">图片1</div>
<div class="imgunit">图片2</div>
<div class="imgunit">图片3</div>
<div class="imgunit">图片4</div>
</div>
<div id="innerbox2"></div>
</div>
</div>
<script type="text/javascript">scrollImgLeft();</script>
</body>
</html>
不能滚动。

解决方案 »

  1.   

    <script type="text/javascript">scrollImgLeft();</script>
    这句最好放在body后面，还有这个是不是应该是用绝对定位啊？？你没有进行任何的定位，当然不能滚动了！
      

  2.   

    把<script type="text/javascript">
    function scrollImgLeft(){
        var speed = 5;
        var outbox = document.getElementById("outbox");
        var innerbox1 = document.getElementById("innerbox1");
        var innerbox2 = document.getElementById("innerbox2");
        innerbox2.innerHTML=innerbox1.innerHTML;
        function Marquee(){
            if(innerbox1.offsetWidth-outbox.scrollLeft<=0)
            {    
                outbox.scrollLeft-=innerbox1.offsetWidth;
            }
            else
            {
              outbox.scrollLeft++;
          }
        }
      var MyMar=setInterval(Marquee,speed);
      outbox.onmouseover=function() {clearInterval(MyMar);}
      outbox.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
    }
    </script>
    这个脚本放在</div>的后面
      

  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" />
    <title>ceshi</title><style type="text/css">
    body{
        margin:0;
    }
    .w960{
        width:960px;
    }
    .center{
        margin:0 auto;
    }
    .clear{
        overflow:hidden;
    }
    #outbox{
        border:1px solid #ff0000;
        width:1000%;
        padding:3px;
    }
    #innerbox1,#innerbox2{
        float:left;
        border:1px solid #1a3b6c;
    }
    .imgunit{
        width:170px;
        height:145px;
        float:left;
        background:#3e6fb2;
        margin:2 2px;
        color:#FFFFFF;
    border:1px solid green;
    }
    </style><body>
    <div class="w960 center clear">
        <div id="outbox">
            <div id="innerbox1">
                <div class="imgunit">图片1</div>
                <div class="imgunit">图片2</div>
                <div class="imgunit">图片3</div>
                <div class="imgunit">图片4</div>
            </div>
            <div id="innerbox2"></div>
        </div>
    </div>
    <script type="text/javascript">    var speed = 5;
        var outbox = document.getElementById("outbox");
        var innerbox1 = document.getElementById("innerbox1");
        var innerbox2 = document.getElementById("innerbox2");
        innerbox2.innerHTML=innerbox1.innerHTML;
    alert(innerbox2.offsetWidth)
    alert(outbox.scrollLeft)
        function Marquee(){
            if(innerbox2.offsetWidth-outbox.scrollLeft<=0)
            {    
                outbox.scrollLeft-=innerbox1.offsetWidth;
            }
            else
            {
              outbox.scrollLeft++;
          }
        }
      var MyMar=setInterval(Marquee,speed);
      outbox.onmouseover=function() {clearInterval(MyMar);}
      outbox.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
    </script>
    </body>
    </html>
    首先你的代码中function中不应该再有function，其次，你的innerbox2.offsetWidth-outbox.scrollLeft<=0判断的时候有错误，第三你的布局导致代码不能正常运行，你现在该一下布局就可以了
      

  4.   

    <html>
    <head>
    </head>
    <style type="text/css">
    body{
        margin:0;
    }
    .w960{
        width:960px;
    }
    .center{
        margin:0 auto;
    }
    .clear{
        overflow:hidden;
    }
    #outbox{
        border:1px solid #ff0000;
        width:1000%;
        padding:3px;
    }
    #innerbox1,#innerbox2{
        float:left;
        border:1px solid #1a3b6c;
    }
    .imgunit{
        width:170px;
        height:145px;
      float:left;
        background:#3e6fb2;
        margin:2 2px;
        color:#FFFFFF;
    }
    </style>
    <script type="text/javascript">
    function scrollImgLeft(){
        var speed = 5;
        var outbox = document.getElementById("div1");//here
        var innerbox1 = document.getElementById("innerbox1");
        var innerbox2 = document.getElementById("innerbox2");
        innerbox2.innerHTML=innerbox1.innerHTML;
        function Marquee(){
            if(innerbox1.offsetWidth-outbox.scrollLeft<=0)
            {    
                outbox.scrollLeft-=innerbox1.offsetWidth;
            }
            else
            {
              outbox.scrollLeft++;
          }
        }
      var MyMar=setInterval(Marquee,speed);
      outbox.onmouseover=function() {clearInterval(MyMar);}
      outbox.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
    }
    </script>
    <body>
    <div class="w960 center clear" id=div1><!-- here-->
        <div id="outbox">
            <div id="innerbox1">
                <div class="imgunit">图片1</div>
                <div class="imgunit">图片2</div>
                <div class="imgunit">图片3</div>
                <div class="imgunit">图片4</div>
            </div>
            <div id="innerbox2"></div>
        </div>
    </div>
    <script type="text/javascript">scrollImgLeft();</script>
    </body>
    </html>
      

  5.   


    <!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" />
    <title>ceshi</title><style type="text/css">
    body{
        margin:0;
    }
    .w960{
        width:960px;
    }
    .center{
        margin:0 auto;
    }
    .clear{
        overflow:hidden;
    }
    #outbox{
        border:1px solid #ff0000;
        width:1000%;
        padding:3px;
    }
    #innerbox1,#innerbox2{
        float:left;
        border:1px solid #1a3b6c;
    }
    .imgunit{
        width:170px;
        height:145px;
        float:left;
        background:#3e6fb2;
        margin:2 2px;
        color:#FFFFFF;
    border:1px solid green;
    }
    </style><body>
    <div class="w960 center clear" id="test">
        <div id="outbox">
            <div id="innerbox1">
                <div class="imgunit">图片1</div>
                <div class="imgunit">图片2</div>
                <div class="imgunit">图片3</div>
                <div class="imgunit">图片4</div>
            </div>
            <div id="innerbox2"></div>
        </div>
    </div>
    <script type="text/javascript">    var speed = 5;
        var outbox = document.getElementById("test");
        var innerbox1 = document.getElementById("innerbox1");
        var innerbox2 = document.getElementById("innerbox2");
        innerbox2.innerHTML=innerbox1.innerHTML;
    alert(innerbox1.offsetWidth)
    alert(outbox.scrollLeft)
        function Marquee(){
            if(innerbox1.offsetWidth-outbox.scrollLeft<=0)
            {    
                outbox.scrollLeft-=innerbox1.offsetWidth;
            }
            else
            {
              outbox.scrollLeft++;
          }
        }
      var MyMar=setInterval(Marquee,speed);
      outbox.onmouseover=function() {clearInterval(MyMar);}
      outbox.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
    </script>
    </body>
    </html>
    这样就可以了