图片切换效果，可是点击任一数字的时候，焦点总是在第一个上

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0;margin:0;}
.img_toggle{width:180px;height:30px;background:#ff0000;}
.liA{width:30px;height:30px;line-height:30px;text-align:center;background:#ffffff;color:#000000;cursor:pointer;float:left;margin:0 5px 0 0;}
.liB{width:30px;height:30px;line-height:30px;text-align:center;background:#ff0000;color:#ffffff;cursor:pointer;float:left;margin:0 5px 0 0;}
.ulA{list-style:none;padding:0;margin:0;}
</style>
<script type="text/javascript">
function $(elem){         //obtain id
return !document.getElementById(elem) ? null : document.getElementById(elem);
}
var col_Num = 4;
function img_Slip(target_id){
var _com = this;
var _imgArr = [];
for(var i = 0;i < col_Num;i++){
var Push_Con = "<li class='liA'>" + (i + 1) + "</li>";
_imgArr.push(Push_Con);
}
var imgArrString = _imgArr.join("\n");
var newUL = document.createElement("ul");
newUL.className = "ulA";
newUL.innerHTML = imgArrString;
$(target_id).appendChild(newUL);

var CurrentNum = 0;

_com.AddEvent = function(){

var liDetail0 = $(target_id).getElementsByTagName("li");
for(var n = 0;n < liDetail0.length;n++){
liDetail0[n].attachEvent("onclick",function(){
CurrentNum = n;
_com.ChangeFocus();
});
}
};
_com.ChangeFocus = function(){
var liDetail = $(target_id).getElementsByTagName("li");
if(CurrentNum >= col_Num)
CurrentNum = 0;
for(var j = col_Num - 1;j >= 0;j--){
if(CurrentNum == j){
liDetail[j].className = "liB";
}else
liDetail[j].className = "liA";
}
CurrentNum++;
};
}
</script>
</head>
<body>
<div id="img_toggle" class="img_toggle">
</div>
<script type="text/javascript">
var a = new img_Slip("img_toggle");
setInterval('a.ChangeFocus()',1000);
a.AddEvent();
</script>
</body>
</html>上面是代码，帮我看看到底是怎么回事

解决方案 »

  1.   


    <!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=gb2312" /> 
    <title>无标题文档 </title> 
    <style type="text/css"> 
    *{padding:0;margin:0;} 
    .img_toggle{width:180px;height:30px;background:#ff0000;} 
    .liA{width:30px;height:30px;line-height:30px;text-align:center;background:#ffffff;color:#000000;cursor:pointer;float:left;margin:0 5px 0 0;} 
    .liB{width:30px;height:30px;line-height:30px;text-align:center;background:#ff0000;color:#ffffff;cursor:pointer;float:left;margin:0 5px 0 0;} 
    .ulA{list-style:none;padding:0;margin:0;} 
    </style> 
    <script type="text/javascript"> 
    var _com;
    var CurrentNum;
    function $(elem){        //obtain id 
    return !document.getElementById(elem) ? null : document.getElementById(elem); 
    } 
    var col_Num = 4; 
    function img_Slip(target_id){ 
    _com = this; 
    var _imgArr = []; 
    for(var i = 0;i < col_Num;i++){ 
    var Push_Con = " <li class='liA'>" + (i + 1) + " </li>"; 
    _imgArr.push(Push_Con); 
    } 
    var imgArrString = _imgArr.join("\n"); 
    var newUL = document.createElement("ul"); 
    newUL.className = "ulA"; 
    newUL.innerHTML = imgArrString; 
    $(target_id).appendChild(newUL); CurrentNum = 0; _com.AddEvent = function(){ var liDetail0 = $(target_id).getElementsByTagName("li"); 
    for(var n = 0;n < liDetail0.length;n++){ 
      liDetail0[n].attachEvent("onclick",new Function("CurrentNum = " + n + "; _com.ChangeFocus();")); 
    } 
    }; 
    _com.ChangeFocus = function(){ 
    var liDetail = $(target_id).getElementsByTagName("li"); 
    if(CurrentNum >= col_Num) 
    CurrentNum = 0; 
    for(var j = col_Num - 1;j >= 0;j--){ 
    if(CurrentNum == j){ 
    liDetail[j].className = "liB"; 
    }else 
    liDetail[j].className = "liA"; 
    } 
    CurrentNum++; 
    }; 
    } 
    </script> 
    </head> 
    <body> 
    <div id="img_toggle" class="img_toggle"> 
    </div> 
    <script type="text/javascript"> 
    var a = new img_Slip("img_toggle"); 
    setInterval('a.ChangeFocus()',1000); 
    a.AddEvent(); 
    </script> 
    </body> 
    </html> 
      

  2.   

    function(){
        CurrentNum = n;
        _com.ChangeFocus();
    }跟
    new Function("CurrentNum ="+ n+"; _com.ChangeFocus();")
    这个有什么区别么
      

  3.   


    我试验了下，提示n未定义，可是我不明白，
    function(){
        CurrentNum = n;
        _com.ChangeFocus();
    }
    n在for的循环之内，并且liDetail0[n]也能取到值，为什么他定义在内部函数之中就提示未定义呢？
      

  4.   

    function(){ CurrentNum = n;}中的n并不是循环中的n
    该函数是在循环后被调用的，此时n已经不存在了。
    因此，在定义函数时，必须把实际n的值固定写在定义中。