为什么执行了Letf的移动,怎么把2个列表的背景都执行了?

我是想移动left的时候  只让#SLlist li增加className="slFocusCur01";但为什么2边都执行了.
就是说2个互不相关.移动top的时候  只让#colList下的li增加className="slFocusCur01";
该怎么来写啊 ?我都已经判断了啊.急急急,在线等..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title> <style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none}
/*.sl-focus-wrap{width:473px;margin:10px auto;border:1px solid orange;}
.sl-inner-focus{width:473px;height:250px;overflow:hidden;position:relative;}
.sl-innerW-focus{width:2365px;height:250px;position:absolute;top:0;left:0;}
.sl-innerW-focus li{float:left;width:473px;height:250px;}
#list {height:25px}
#list li{float:left;padding:2px 5px ;background:orange;margin-right:1px}*/
.sl-focus-wrap{width:473px;float: left}
.sl-inner-focus{width:473px;height:357px;overflow:hidden;position:relative;}
.sl-innerW-focus{width:2365px;height:250px;position:absolute;top:0;left:0;}
.sl-innerW-focus li{float:left;width:473px;height:250px;}
#SLlist {height:38px}
#SLlist li p{text-align:center;color:#b2b2b2;}
#SLlist li .focus_til{color:#ff956c;line-height:25px}
#SLlist li{width:93px;float:left;background:#fffbfa;border-right:1px solid #ffe8e3;height:38px;border-top:1px solid #ffd8d0;border-bottom:1px solid #ffd8d0}
#SLlist li.slFocusCur01{position:relative; background:#fff4ec}
#SLlist li.slFocusCur01 span{position:absolute;top:-10px;left:38px; background:url(../images/sl-imga225.png) no-repeat;width:11px;height:11px;overflow:hidden}

#slwrapf3fdfdc{width:724px;position:relative;overflow:hidden;height:75px}
#colList{width:130px;position:absolute;right:0;bottom:3px;z-index:9999;}
#colList li{width:15px;height:15px;background:#fff;float:left;margin-left:3px;display:inline;text-align:center;border:1px solid}
#colList li.slFocusCur01{ background:pink}
#colList li a{display:block;height:15px}
#sl-focusCon001{width:724px;height:300px;position:absolute;top:0px;left:0;z-index:9998}
.boxssssdsd2{width:724px;height:75px}
</style>
<script type="text/javascript">
var speed =0;
var timer = null;
var num =0;
var g  =1;
var m =1;
function hl(t) {
    t.className = "slFocusCur01";
}function cancel_hl(t) {
    t.className = "";
}
function move(f,n,id){
var innerW = document.getElementById(id);
if(f == 'left'){
if(innerW.offsetLeft != n){
speed += (n -  innerW.offsetLeft)/8;
}
innerW.style.left = speed + "px";
}else{
if(innerW.offsetTop != n){
speed += (n -  innerW.offsetTop)/8;
}
innerW.style.top = speed + "px";
}
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){move(f,n,id)},10);

}function liA(li){
for(var i=1; i<6; i++){
document.getElementById(li+i).className = "";
}
}
function liB(u,li){
liA(li);
document.getElementById(u).className = "slFocusCur01";
} function autoMove(f,a,li,b1,a0,a1,a2,a3,a4){
switch(num){
case a0:
move(f,num,a);
num = a1;
break;
case a1:
move(f,num,a);
num = a2;
break;
case a2:
move(f,num,a);
num = a3;
break;
case a3:
move(f,num,a);
num = a4;
break;
case a4:
move(f,num,a);
num = a0;
break;
}
if(f == 'left'){
var h = li+ g++;
liB(h,li)
if(g == b1){
g=1;
} }
if(f == 'top'){
var j = li+ m++;
liB(j,li)
if(m == b1){
m=1;
}
}
}
</script> </head> <body>
<div class="sl-focus-wrap">
<div class="sl-inner-focus" id="sl-inner-focus"> <div class="sl-innerW-focus" id="sl-innerW-focus" style="left: -1478.125px; ">
<ul>
<li><a href=""><img src="images/sl-imga223.jpg" alt="1"></a></li>
<li><a href=""><img src="images/sl-imga224.jpg" alt="2"></a></li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div> </div>
<ul id="SLlist">
<li onmouseover="move('left',0,'sl-innerW-focus'); hl(this);" onmouseout="cancel_hl(this)" id="li1" class="">
             <span class="ddpng"></span>
            </li>
<li onmouseover="move('left',-473,'sl-innerW-focus'); hl(this);" onmouseout="cancel_hl(this)" id="li2" class="">
             <span class="ddpng"></span>
            </li>
<li onmouseover="move('left',-946,'sl-innerW-focus'); hl(this);" onmouseout="cancel_hl(this)" id="li3" class="">-946</li>
<li onmouseover="move('left',-1419,'sl-innerW-focus'); hl(this);" onmouseout="cancel_hl(this)" id="li4" class="">-1419</li>
<li onmouseover="move('left',-1892,'sl-innerW-focus'); hl(this);" onmouseout="cancel_hl(this)" id="li5" class="">-1892</li>
</ul>
</div>
<script type="text/javascript">setInterval(function(){autoMove('left','sl-innerW-focus','li',6,0,-473,-946,-1419,-1892)},3100)</script><div id="slwrapf3fdfdc">
                <ul id="colList">
            
                    <li id="ol1" class=""><a href="" onmouseover="move('top',0,'sl-focusCon001')">1</a></li>
                    <li id="ol2" class=""><a href="" onmouseover="move('top',-75,'sl-focusCon001')">2</a></li>
                    <li id="ol3" class=""><a href="" onmouseover="move('top',-150,'sl-focusCon001')">3</a></li>
                    <li id="ol4" class=""><a href="" onmouseover="move('top',-225,'sl-focusCon001')">2</a></li>
                    <li id="ol5" class=""><a href="" onmouseover="move('top',-300,'sl-focusCon001')">3</a></li>
                </ul>
                <div id="sl-focusCon001" style="top: -300px; ">
            
                    <div class="red boxssssdsd2">
                     <a href=""><img src="images/sl-imga226.jpg" alt="1"></a>
                    </div>
            
                    <div class="yellow boxssssdsd2">2
                    </div>
                    <div class="orange boxssssdsd2">
                    3
                    </div>
                    <div class="orange boxssssdsd2">
                    4
                    </div>
                    <div class="orange boxssssdsd2">
                    5
                    </div>
            
                </div>
                <script type="text/javascript">setInterval(function(){autoMove('top','sl-focusCon001','ol',6,0,-75,-150,-225,-300)},3100)</script>
</div>
 </body>
</html>