js 实现图片的不间断滚动中的div width值设置疑点

急急急！！！期待大神火速赶来，<div id="scrolldiv" style=" overflow:hidden; width:1000px; color:#ffffff;">
<table cellspacing="0" cellpadding="0" align="left" border="0" cellspace="0">
<tr>
<td id="td1" valign="top">
<table style="width:1000px; height:89px; border:0;" cellspacing="0" cellpadding="0">
<tr>
<td width="110px" height="89px" background="image/ (1).bmp"></td>
<td width="110px" height="89px" background="image/ (2).bmp"></td>
<td width="110px" height="89px" background="image/ (3).bmp"></td>
<td width="110px" height="89px" background="image/ (4).bmp"></td>
<td width="110px" height="89px" background="image/ (5).bmp"></td>
<td width="110px" height="89px" background="image/ (6).bmp"></td>
<td width="110px" height="89px" background="image/ (7).bmp"></td>
<td width="110px" height="89px" background="image/ (8).bmp"></td>
<td width="110px" height="89px" background="image/ (9).bmp"></td>
<td width="110px" height="89px" background="image/ (10).bmp"></td>
<td width="110px" height="89px" background="image/ (11).bmp"></td>
<td width="110px" height="89px" background="image/ (12).bmp"></td>
</tr>
</table>
</td>
<td id="td2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var n=5;
td2.innerHTML=td1.innerHTML;
var myCheck;
//alert(td2.offsetWidth);
function move(){
if(td2.offsetWidth-scrolldiv.scrollLeft<=0){
//alert("ok");
scrolldiv.scrollLeft=0;
}else{
scrolldiv.scrollLeft++;
}
myCheck=setTimeout(move,n);
}
//alert(scrolldiv);
alert(td1.offsetWidth);
scrolldiv.onmouseover=function(){
clearTimeout(myCheck);
}
scrolldiv.onmouseout=function(){
myCheck=setTimeout(move,n);
}
</script>
其中div width设置成具体的像素值就能实现不间断的滚动，但是像书上写的那样width:100%就只能滚动一会，scrollLeft的最大值只能到667px;然后就不滚动了