我想有两个轮播效果 怎么循环这个轮播效果 而不用调用不同的ID


<!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>无标题文档</title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }body { background: #ecfaff; }#div1{
width:470px;
height:150px;
border:1px solid #AD1925;
margin:100px auto;
position:relative;
}
#div1 .div1{
width:470px;
height:150px;
overflow:hidden;
position:relative;
}
#div1 .div1 ul{
position:absolute;
top:0;
left:0;
z-index:9999;
}
#div1 .div1 li{
width:470px;
height:150px;
float:left;
filter:alpha(opacity:100);
opacity:1;
}
#div1 .div1 img{
width:470px;
height:150px;
float:left;
filter:alpha(opacity:100);
opacity:1;
}
#div1 .div2{
position:relative;
}
#div1 .div2 ul{
position:absolute;
bottom:4px;
right:10px;
z-index:9999;
}
#div1 .div2 li{
float: left;
margin-right: 3px; 
display:inline-block;
cursor: pointer; 
background: #fcf2cf; 
border: 1px solid #f47500;
padding: 2px 6px; 
color: #d94b01; 
font-family: arial; 
font-size: 12px;
position:relative;
  }
#div1 .div2 .active {
 padding: 3px 8px; 
 font-weight: bold; 
 color: #ffffff; 
 background: #ffb442; 
 position: relative; 
 bottom: 2px; 
 }
#div1 .div2 .div3{
width:470px;
height:30px;
position:absolute;
left:0;
bottom:0;
background:#066;
}</style>
<script type="text/javascript">
// JavaScript Document
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,json,fnEnd)
{
clearInterval(obj.time);
obj.time=setInterval(function(){

var aStop=true//假设所有值都到了

for(var attr in json)
{
var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr])
{
aStop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha:(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
if(aStop)
{
clearInterval(obj.time);
if(fnEnd) fnEnd();
}

}
},30)
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aBtn=document.getElementsByTagName('ul')[1].getElementsByTagName('li');
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');

var now=0;

for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onmouseover=function()
{
now=this.index
tab();
}
function tab()
{
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
}
aBtn[now].className='active'

startMove(oUl,{top:-150*now})
}
function next()
{
now++;
if(now==aBtn.length)
{
now=0;
}
tab();
}
}
var time=setInterval(next,2000);
oDiv.onmouseover=function()
{
clearInterval(time);
}
oDiv.onmouseout=function()
{
time=setInterval(next,2000);
}
}</script>
</head><body>
<div id="div1">
   <div class="div1">
     <ul>
       <li><img src="http://www.dzq.com/bbs/data/attachment/forum/201309/24/161203i4ci1zs1slsdqt15.jpg" /><div class="div3">111111111</div></li>
       <li><img src="http://www.dzq.com/bbs/data/attachment/forum/201309/24/161204n1q1n2hqi8l6299l.jpg" /></li>
       <li><img src="http://www.dzq.com/bbs/data/attachment/forum/201310/16/180538h4fgq2692k2draq3.jpg" /></li>
       <li><img src="http://www.dzq.com/bbs/data/attachment/forum/201310/07/110426rdz8hiwh11q1e922.jpg" /></li>
       <li><img src="http://www.dzq.com/bbs/data/attachment/forum/201309/24/1612069hnqnh6nywo2d69v.jpg" /></li>
     </ul>
   </div>
   <div class="div2">
     <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
     </ul>
   </div>
</div>
</body>
</html>如果我想要两个 这样的轮播图  怎么用循环来做  而不用调不同的id来做