刚刚写的图片切换效果，能正常切换，但是点击了，出现异常，急，在线等

<!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;}
#toggle{width:200px;height:200px;border:1px solid #0046a3;overflow:hidden;}
#toggle_num{width:150px;position:relative;top:180px;left:25px;background:#f3f3f3;}
#toggle_num ul{padding:0;margin:0;list-style:none;}
#toggle_num ul li{width:20px;height:20px;line-height:20px;border:1px solid #0046a3;color:#ffffff;float:left;text-align:center;margin:0 15px 0 0;}
.styleA{font:20px "宋体";background:#ff0000;}
.styleB{font:20px "宋体";background:#ffffff;}
</style>
<script type="text/javascript">
var curNew = 0;
function $(elem){
return typeof elem == 'string' ? document.getElementById(elem) : elem;
}
function addEvent(obj,type,func){
if(obj.addEventListener){
obj.addEventListener(type,func,false);
}
if(obj.attachEvent){
obj.attachEvent("on" + type,func);
}
}
function com(obj,listElem){
_com = this;
_com.obj = $(obj);
_com._list = _com.obj.getElementsByTagName(listElem);
}
com.prototype._addEvent = function(){
for(var i = _com._list.length - 1;i >= 0;i--){
var j = i;
_com._list[i].onclick = new Function('curNew='+(i-1)+';com.prototype.afterEvent();');
/* _com._list[i].onclick = function(){
curNew = j - 1;
com.prototype.afterEvent();
};*/
}
//curNew--;
com.prototype.afterEvent();
};
com.prototype.afterEvent = function(){
curNew = curNew + 1;
if(curNew > _com._list.length)
curNew = 0;
for(var i = 0;i < _com._list.length;i++){
if(i == (curNew-1))_com._list[i].className = "styleA";
else _com._list[i].className = "styleB";
}
if(timer)clearTimeout(timer);
var timer = setTimeout("com.prototype.afterEvent()",3000);
}; 
</script>
</head>
<body>
<div id="toggle">
<div id="toggle_num">
<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</div>
</div>
<script type="text/javascript">
(function(){
var b = new com("toggle_num","li");
b._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;}
    #toggle{width:200px;height:200px;border:1px solid #0046a3;overflow:hidden;}
    #toggle_num{width:150px;position:relative;top:180px;left:25px;background:#f3f3f3;}
    #toggle_num ul{padding:0;margin:0;list-style:none;}
    #toggle_num ul li{width:20px;height:20px;line-height:20px;border:1px solid #0046a3;color:#ffffff;float:left;text-align:center;margin:0 15px 0 0;}
    .styleA{font:20px "宋体";background:#ff0000;}
    .styleB{font:20px "宋体";background:#ffffff;}
    </style>
    <script type="text/javascript">
    var curNew = 0;
    var timer;
    function $(elem){
        return typeof elem == 'string' ? document.getElementById(elem) : elem;
    }
    function addEvent(obj,type,func){
        if(obj.addEventListener){
            obj.addEventListener(type,func,false);
        }
        if(obj.attachEvent){
            obj.attachEvent("on" + type,func);
        }
    }
    function com(obj,listElem){
        _com = this;
        _com.obj = $(obj);
        _com._list = _com.obj.getElementsByTagName(listElem);
    }
    com.prototype._addEvent = function(){
        for(var i = _com._list.length - 1;i >= 0;i--){
            var j = i;
            _com._list[i].onclick = new Function('curNew='+(i)+';com.prototype.afterEvent();');
    /*        _com._list[i].onclick = function(){
                curNew = j - 1;
                com.prototype.afterEvent();
            };*/
        }
        //curNew--;
        com.prototype.afterEvent();
    };
    com.prototype.afterEvent = function(){
        for(var i = 0;i < _com._list.length;i++){
            if(i == (curNew))_com._list[i].className = "styleA";
            else _com._list[i].className = "styleB";
        }
        curNew++;
        if(curNew > _com._list.length-1) curNew = 0;
        if(timer)clearTimeout(timer);
        timer = setTimeout("com.prototype.afterEvent()",3000);
    }; 
    </script>
    </head>
    <body>
    <div id="toggle">
        <div id="toggle_num">
            <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
        </div>
    </div>
    <script type="text/javascript">
    (function(){
        var b = new com("toggle_num","li");
        b._addEvent();
    })();
    </script>
    </body>
    </html>