我HTML里有多个<div class="scroll" id="scroll"> JS能动态吗？

只用一个是正常可以滚动 。 但是如果添加两个一样的时候就不正常了。。希望高手帮我完善下这个JS。。html页面
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<meta name="Description" content="。" />
<meta name="Keywords" content=",,," />
<meta id="author" content="" />
<meta id="Copyright" content="" />
<meta name="verify-v1" content="" />
<meta name="generator" content="WordPress 3.2.1" />
<title>banner图切换和图片左右点击滚动</title>
<link rel="stylesheet" type="text/css" media="all" href="style/global.css" /><script src="style/scroll.js" type="text/javascript"></script></head>
<body>   <!--图片滚动区-->
<div class="scrollbar1">
<a href="javascript:;" class="go_left" onfocus="this.blur()" id="go_left" onclick="goPrevious(this)"></a>
  <div class="scroll" id="scroll"><ul>   <li> <a href="#" target="_blank"><img src="pci/1.jpg" /> <span> <b>CDC专属QQ拼音皮肤，一键直达CDC官方博客！</b> <br />
2009.11.03 <br />
阿坚/视觉设计</span> </a> </li>
  <li> <a href="#" target="_blank"><img src="pci/2.jpg" /> <span> <b>Windows Phone 7 界面设计与交互指南第二版中英译本</b> <br />
2011.05.13 <br />
InkandColor/交互设计</span> </a> </li>
  <li> <a href="#" target="_blank"><img src="pci/3.jpg" /> <span> <b>情感的容器　被寄托了的QQ2010视觉设计</b> <br />
2010.02.02 <br />
猕猴桃/视觉设计</span> </a> </li>
  <li> <a href="http://cdc.tencent.com/?p=3070" target="_blank"><img src="pci/4.jpg" /> <span> <b>The sky belongs to CDC</b> <br />
2010.10.21 <br />
jimmy/最近折腾</span> </a> </li>
 <li> <a href="http://cdc.tencent.com/?p=3070" target="_blank"><img src="pci/5.jpg" /> <span> <b>The sky belongs to CDC</b> <br />
2010.10.21 <br />
jimmy/最近折腾</span> </a> </li>                         <li> <a href="#" target="_blank"><img src="pci/1.jpg" /> <span> <b>CDC专属QQ拼音皮肤，一键直达CDC官方博客！</b> <br />
2009.11.03 <br />
阿坚/视觉设计</span> </a> </li>
  <li> <a href="#" target="_blank"><img src="pci/2.jpg" /> <span> <b>Windows Phone 7 界面设计与交互指南第二版中英译本</b> <br />
2011.05.13 <br />
InkandColor/交互设计</span> </a> </li>
  <li> <a href="#" target="_blank"><img src="pci/3.jpg" /> <span> <b>情感的容器　被寄托了的QQ2010视觉设计</b> <br />
2010.02.02 <br />
猕猴桃/视觉设计</span> </a> </li>
  <li> <a href="http://cdc.tencent.com/?p=3070" target="_blank"><img src="pci/4.jpg" /> <span> <b>The sky belongs to CDC</b> <br />
2010.10.21 <br />
jimmy/最近折腾</span> </a> </li>
 <li> <a href="http://cdc.tencent.com/?p=3070" target="_blank"><img src="pci/5.jpg" /> <span> <b>The sky belongs to CDC</b> <br />
2010.10.21 <br />
jimmy/最近折腾</span> </a> </li>
</ul>
  </div>
<a href="javascript:;" class="go_right" onfocus="this.blur()" id="go_right" onclick="goNext(this)"></a>
</div>
<!--图片滚动区-->

  <!--图片滚动区-->
<div class="scrollbar1">
<a href="javascript:;" class="go_left" onfocus="this.blur()" id="go_left" onclick="goPrevious(this)"></a>
  <div class="scroll" id="scroll1"><ul>   <li> <a href="#" target="_blank"><img src="pci/1.jpg" /> <span> <b>CDC专属QQ拼音皮肤，一键直达CDC官方博客！</b> <br />
2009.11.03 <br />
阿坚/视觉设计</span> </a> </li>
  <li> <a href="#" target="_blank"><img src="pci/2.jpg" /> <span> <b>Windows Phone 7 界面设计与交互指南第二版中英译本</b> <br />
2011.05.13 <br />
InkandColor/交互设计</span> </a> </li>
  <li> <a href="#" target="_blank"><img src="pci/3.jpg" /> <span> <b>情感的容器　被寄托了的QQ2010视觉设计</b> <br />
2010.02.02 <br />
猕猴桃/视觉设计</span> </a> </li>
  <li> <a href="http://cdc.tencent.com/?p=3070" target="_blank"><img src="pci/4.jpg" /> <span> <b>The sky belongs to CDC</b> <br />
2010.10.21 <br />
jimmy/最近折腾</span> </a> </li>
 <li> <a href="http://cdc.tencent.com/?p=3070" target="_blank"><img src="pci/5.jpg" /> <span> <b>The sky belongs to CDC</b> <br />
2010.10.21 <br />
jimmy/最近折腾</span> </a> </li>
  <li> <a href="#" target="_blank"><img src="pci/1.jpg" /> <span> <b>CDC专属QQ拼音皮肤，一键直达CDC官方博客！</b> <br />
2009.11.03 <br />
阿坚/视觉设计</span> </a> </li>
  <li> <a href="#" target="_blank"><img src="pci/2.jpg" /> <span> <b>Windows Phone 7 界面设计与交互指南第二版中英译本</b> <br />
2011.05.13 <br />
InkandColor/交互设计</span> </a> </li>
  <li> <a href="#" target="_blank"><img src="pci/3.jpg" /> <span> <b>情感的容器　被寄托了的QQ2010视觉设计</b> <br />
2010.02.02 <br />
猕猴桃/视觉设计</span> </a> </li>
  <li> <a href="http://cdc.tencent.com/?p=3070" target="_blank"><img src="pci/4.jpg" /> <span> <b>The sky belongs to CDC</b> <br />
2010.10.21 <br />
jimmy/最近折腾</span> </a> </li>
 <li> <a href="http://cdc.tencent.com/?p=3070" target="_blank"><img src="pci/5.jpg" /> <span> <b>The sky belongs to CDC</b> <br />
2010.10.21 <br />
jimmy/最近折腾</span> </a> </li>   </div>
<a href="javascript:;" class="go_right" onfocus="this.blur()" id="go_right" onclick="goNext(this)"></a>
</div></body>
</html>
CSS页面ul{margin:0;padding:0;}/*==========Footer==========*/
.scrollbar1{margin:0 auto;width:928px;height:185px;padding:18px 0 0 62px;position:relative;overflow:hidden;background:url(../images/scroll_bg.jpg) left 2px no-repeat;}
.scrollbar1 a.go_left,a.go_right{width:18px;height:36px;position:absolute;top:85px;cursor:default;background-image:url(../images/icon.png);background-repeat:no-repeat;}
.scrollbar1 a.go_left{left:20px;background-position:0px -90px;background-image:url(../images/icon.png);background-repeat:no-repeat}
.scrollbar1 a.go_right{right:25px;background-position:-19px -90px;background-image:url(../images/icon.png);background-repeat:no-repeat}
.scrollbar1 a.leftOn,a.rightOn{width:18px;height:36px;position:absolute;top:85px;cursor:pointer;background-image:url(../images/icon.png);background-repeat:no-repeat}
.scrollbar1 a.leftOn{left:20px;background-position:-40px -90px;background-image:url(../images/icon.png);background-repeat:no-repeat}
.scrollbar1 a.leftOn:hover{left:20px;background-position:-80px -90px;background-image:url(../images/icon.png);background-repeat:no-repeat}
.scrollbar1 a.rightOn{right:25px;background-position:-59px -90px;background-image:url(../images/icon.png);background-repeat:no-repeat}
.scrollbar1 a.rightOn:hover{right:25px;background-position:-99px -90px;
background-image:url(../images/icon.png);background-repeat:no-repeat}
.scroll{float:left;width:870px;height:164px;overflow:hidden;position:relative;background-image:url(../images/icon.png);background-repeat:no-repeat}
.scroll li{float:left;width:164px;height:154px;padding:5px;display:block;position:relative;overflow:hidden;background-position:0px -580px;background-repeat:no-repeat;background-image:url(../images/icon.png);background-repeat:no-repeat}
.scroll li img{width:154px;height:154px;border:0px;padding:0px;margin:0px;background-image:url(../images/icon.png);background-repeat:no-repeat}
.scroll li b{font-size:14px;}
.scroll li a{text-decoration:none;color:#fff;}
.scroll li a:hover{text-decoration:none;color:#fff;border:none;}
.scroll li a span{width:134px;padding:10px 10px 15px;color:#fff;text-decoration:none;background:#000;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;position:absolute;left:5px;top:5px;display:none;}
.scroll li a:hover span{filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;display:block;}
/*==========Footer End==========*/
js页面var box,scrollIndex=0,sbArr=new Array(),i;
function $(id){return document.getElementById(id)}
window.onload=function(){
box=$("scroll"); var bb=box.firstChild;
var tmp=bb.getElementsByTagName("li");
var allWidth=0;
for (var n=0;n<tmp.length;n++){
if(tmp[n].className=="smallbox" || true){
sbArr.push(tmp[n]);
sbArr[sbArr.length-1].scrollFlag=allWidth;
allWidth=allWidth+sbArr[sbArr.length-1].offsetWidth;
}
}
resize(bb);
changeBtn();
}
function resize(o){
var width=0,height=0;
for (var n=0;n<sbArr.length;n++){
width=width+sbArr[n].offsetWidth;
if (sbArr[n].offsetHeight>height) height=sbArr[n].offsetHeight;
}
o.style.width=width+"px";
o.style.height=height+"px";
}
function goPrevious1(){
if (--scrollIndex<0) scrollIndex=0;
moveBox(sbArr[scrollIndex].scrollFlag);
changeBtn();
}
function goNext1(){
if (sbArr[scrollIndex+1].scrollFlag>=box.scrollWidth-box.clientWidth){
moveBox(box.scrollWidth-box.clientWidth);
if (box.scrollLeft!=box.scrollWidth-box.clientWidth) ++scrollIndex;
}else{
if (++scrollIndex>sbArr.length-1) scrollIndex=sbArr.length-1;
moveBox(sbArr[scrollIndex].scrollFlag);
}
changeBtn();
}
function goPrevious(){
goPrevious1();
goPrevious1();
goPrevious1();
goPrevious1();
goPrevious1();
}
function goNext(){
goNext1();
goNext1();
goNext1();
goNext1();
goNext1();
}
function changeBtn(){
if(scrollIndex==0)$("go_left").className="go_left";
else $("go_left").className="leftOn";
if(box.scrollWidth-870==box.scrollLeft)$("go_right").className="go_right";
else $("go_right").className="rightOn";
}function moveBox(scrollFlag){
clearTimeout(box.getAttribute("ta"));
if (Math.abs(scrollFlag-box.scrollLeft)<1){
box.scrollLeft=scrollFlag;
changeBtn();
}else{
var ta=parseInt((scrollFlag-box.scrollLeft)/5+1);
if (Math.abs(ta)<0.5) ta=ta>0?0.5:-0.5;
box.scrollLeft=box.scrollLeft+ta;
box.setAttribute("ta",setTimeout(function(){moveBox(scrollFlag)},5));
}
}