调试显示 Cannot set property 'onmouseover' of undefined

<title>仿flash轮播图</title>
<meta charset="utf-8"/>
<link href="index.css" rel="stylesheet" type="text/css"/>

<style>
    .play{width:400px;height:430px;margin:50 auto;background:#999;font:12px Arial;}
    .big_pic{width:400;height:320px;overflow:hidden;background:#ccc;border-bottom:1px solid #222;position:relative;}
    .big_pic li{width:400;height:320px;overflow:hiden;background:url(img/loading.gif) no-repeat center center;position:absolute;top:0;left:0;z-index:0;}
    .mark_left{width:200px;height:320px;background:red;top:0;left:0;position:absolute;z-index:3000;filter:alpha(opacity:0);opacity:0;}
    .mark_right{width:200px;height:320px;background:green;top:0;left:200px;position:absolute;z-index:3000;filter:alpha(opacity:0);
    opacity:0}
    .big_pic .prev{width:60px;height:60px;position:absolute;top:130px;left:10px;z-index:3001;background:url(img/btn.gif) no-repeat;fiter:alpha(opacity:0);opacity:0;cursor: pointer;}
    .big_pic .next{width:60px;height:60px;position:absolute;top:130px;right:10px;z-index:3001;background:url(img/btn.gif) no-repeat 0 -60px;filter:alpha(opacity:0);opacity:0;cursor: pointer;}
    .text{position:absolute;bottom:10px;left:10px;z-index:3000;color:#ccc;}
    .length{position:absolute;bottom:10px;right:10px;z-index:3000;color:#ccc;}
    .bg{width:400px;height:25px;position:absolute;background:#000;bottom:0;left:0;z-index:2999;filter:alpha(opacity:30);opacity:0.3;}
    .small_pic{width:380px;height:94px;position:relative;left:10px;top:7px;overflow:hidden;}
    .small_pic ul{height:94px;left:0;top:0;position:absolute;}
    .small_pic li{width:120px;height:94px;float:left;padding-right:10px;background:url(img/loading.gif) no-repeat center center;cursor: pointer; filter: alpha(opacity:30); opacity: 0.3;}
    .small_pic img { width: 120px; height: 94px; }
</style>
<script>
    function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }
        else{
            return getComputedStyle(obj,false)[name];
        }
    }
    function starMove(obj,attr,iTarget){             //运动框架,改变attr,可以实现不同属性的变换。
        clearInterval(obj.timer);
        var cur=0;
        obj.timer=setInterval(function(){
            if(attr=="opacity"){
                cur=Math.round(parseFloat(getStyle(obj,attr))*100);
            }
            else{
                cur=parseInt(getStyle(obj,attr));
            }
            var speed=(iTarget-cur)/4;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(cur==iTarget){
                clearInterval(obj.timer);
            }
            else{
                if(attr=="opacity"){
                    obj.style.filter="alpha(opacity:+cur+speed+)";
                    obj.stylr.opacity=(cur+speed)/100;
                }
                else{
                    obj.style[attr]=cur+speed+'px';
                }    
            }
        },30)            
    }
    function  getByClass(oParent,sClass){             //从oParent里选出class为sClass的元素；
        var aEle=oParent.getElementsByTagName("*");
        var aResult=[];
        for(var i=0;i<aEle.length;i++){
            if(aEle[i].ClassName==sClass){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }
    window.onload=function(){
        var oDiv=document.getElementById("playimage");
        var oBtnPrev=getByClass(oDiv,'prev')[0];
        var oBtnNext=getByClass(oDiv,'next')[0];
        var oMarkLeft=getByClass(oDiv,'mark_left')[0];
        var oMarkRight=getByClass(oDiv,'mark_right')[0];
        oMarkLeft.onmouseover=function(){
            starMove(oBtnPrev,'opacity',100);
        }
    }
</script>

</head>
<body>

<div id="playimage" class="play">
    <ul class="big_pic">
        <!--按钮-->
        <div class="prev"></div>
        <div class="next"></div>
    
        <div class="text">加载图片说明……</div>
        <div class="length">计算图片数量……</div>
    
        <a class="mark_left" href="javascript:;"></a>
        <a class="mark_right" href="javascript:;"></a>
        <div class="bg"></div>
    
        <li style="z-index:1"><img src="img/1.jpg"/></li>
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
        <li><img src="img/4.jpg"/></li>
        <li><img src="img/5.jpg"/></li>
        <li><img src="img/6.jpg"/></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter:alpha(opacity:100);opacity:1;"><img src="img/1.jpg"/></li>
            <li><img src="img/2.jpg"/></li>
            <li><img src="img/3.jpg"/></li>
            <li><img src="img/4.jpg"/></li>
            <li><img src="img/5.jpg"/><li>
            <li><img src="img/6.jpg"/></li>
        </ul>
    </div>
</div>

</body>
</html>

if(aEle[i].className==sClass){  // className
    aResult.push(aEle[i]);
}

问题出在这 script 当中的这句代码：

 oMarkLeft.onmouseover=function(){
    starMove(oBtnPrev,'opacity',100);
 }

oMarkLeft是你取得的一个原生DOM元素，首先你获取这个DOM元素的方式就写错了。应该这么写：

var oMarkLeft = document.getElementsByClassName('mark_left')[0]

它肯定没有 onmouseover这个方法，仅仅对于这一行代码而言，你原本想做的应该是：

.addEventListener("mouseover",function(e){
    starMove(oBtnPrev,'opacity',100);
})

不过我觉得整体代码可能都是东拼西凑出来的，没仔细看，改这一个问题也许并不能解决所有问题。

getByClass 方法中 aEle[i].ClassName 错了，是 className

【热门文章】