求大神解答，js有点问题-慕课网

求大神解答，js有点问题

来源：3-3 bug解决及定时器优化

慕数据4614238

2016-05-17 11:54

就是这一节的内容，自己稍作了下改变，但是一打开浏览器会报一个错误（谷歌浏览器报的错误是Failed to load resource: the server responded with a status of 404 (Not Found)），不能自动运行，只有鼠标出发一下，才会自动运行，可能我的代码本身就有问题，可是自己道行太浅，不知道怎么改。下面是html结构和

<body>
        <div class="notice" id="notice">
            <div id="notice-tit" class="notice-tit">
                <ul>
                    <li class="select"><a href="#">公告</a></li>
                    <li><a href="#">规则</a></li>
                    <li><a href="#">论坛</a></li>
                    <li><a href="#">安全</a></li>
                    <li><a href="#">公益</a></li>
                </ul>
            </div>
            <div class="notice-con" id="notice-con">
                <div class="mod">
                    <ul>
                        <li><a href="#">1111111111111</a></li>

                        <li><a href="#">1111111111111</a></li>

                        <li><a href="#">1111111111111</a></li>

                        <li><a href="#">1111111111111</a></li>
                    </ul>
                </div>
                <div class="hidden">
                    <ul>
                        <li><a href="#">2222222222222</a></li>

                        <li><a href="#">2222222222222</a></li>
    
                        <li><a href="#">2222222222222</a></li>

                        <li><a href="#">2222222222222</a></li>
                    </ul>
                </div>
                <div class="hidden">
                    <ul>
                        <li><a href="#">3333333333333</a></li>

                        <li><a href="#">3333333333333</a></li>

                        <li><a href="#">3333333333333</a></li>

                        <li><a href="#">3333333333333</a></li>
                    </ul>
                </div>
                <div class="hidden">
                    <ul>
                        <li><a href="#">4444444444444</a></li>

                        <li><a href="#">4444444444444</a></li>

                        <li><a href="#">4444444444444</a></li>

                        <li><a href="#">4444444444444</a></li>
                    </ul>
                </div>
                <div class="hidden">
                    <ul>
                        <li><a href="#">5555555555555</a></li>

                        <li><a href="#">5555555555555</a></li>

                        <li><a href="#">5555555555555</a></li>

                        <li><a href="#">5555555555555</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>

js代码：

    var index=0;
        var timer=null;
        var notice_title = document.getElementById("notice-tit");
        var tit_li=notice_title.getElementsByTagName("li");
        var notice_con=document.getElementById("notice-con");
        var con_divs=notice_con.getElementsByTagName("div");
       //鼠标滑过，滑出事件绑定
    function mainchange(){
           if(timer){clearInterval(timer);timer=null;}//清除定时器
           for(var i=0;i<tit_li.length;i++){
            tit_li[i].id=i;
            tit_li[i].onmouseover=function(){
            clearInterval(timer);
            changeClassName(this.id);
        }
            tit_li[i].onmouseout=function(){
                timer=setInterval(autoplay,2000);
            }
            con_divs[i].onmouseover=function(){
                clearInterval(timer);
            }
            con_divs[i].onmouseout=function(){
                timer=setInterval(autoplay,2000);
            }
        }}
       
        //自动切换事件
        function autoplay(){
        index++;
        if(index>=tit_li.length){
             index=0;
        }
        changeClassName(index);
        }
         
        //切换事件
        function changeClassName(MyIndex){
        console.log(MyIndex);
        for(var k=0;k<tit_li.length;k++){
        tit_li[k].className="";
        con_divs[k].className="hidden";
        }
        tit_li[MyIndex].className="select";
        con_divs[MyIndex].className="mod";
        index=MyIndex;//使得当鼠标滑出后，继续按当前index向后切换
       }
    
        //添加自动运行事件
        function addEventload(func){
            oldonload=window.onload;
            if(typeof window.onload!='function'){
                window.onload=func;
            }else{
                window.onload=function(){
                    oldonload();
                    func();
                }
            }
        }
        //运行
        timer=setInterval(autoplay,2000);
        addEventload(mainchange);

写回答关注