mouseover和mouseleave代码对我的程序无效

Question

我写了代码在html页面上设置了7张图片，并编写了jQuery代码来旋转它们，当我打算将鼠标移到图片上时，它们停止旋转，而当我将鼠标移出图片区域时，它们再次旋转，但是现在我发现mouseover功能和mouseleave功能没有作用

尝试使用jQuery旋转HTML页面上的七张图片，但现在发现mouseover函数和mouseleave函数无效

HTML:
   <div class="rotation_box">
        <div class="list">
            <ul>
                <li class="p7"><a href="#"><img src="images/yf_r1.jpg" title="杨帆"/></a></li>
                <li class="p6"><a href="#"><img src="images/szy_r1.jpg" title="苏中元"/></a></li>
                <li class="p5"><a href="#"><img src="images/kr_r1.jpg" title="匡荛"/></a></li>
                <li class="p4"><a href="#"><img src="images/wj_r1.jpg" title="王军"/></a></li>
               <li class="p3"><a href="#"><img src="images/zhang_r1.jpg" title="张曜明"/></a></li>
                <li class="p2"><a href="#"><img src="images/lxh_r1.jpg" title="刘晓晖"/></a></li>
                <li class="p1"><a href="#"><img src="images/test/77.jpg" title=""/></a></li>
            </ul>
        </div>  

        <a href="javascript:;" class="prev btn"><</a>
        <a href="javascript:;" class="next btn">></a>

        <div class="buttons">
            <a href="javascript:;"><span  class="blue"></span></a>
            <a href="javascript:;"><span></span></a>
            <a href="javascript:;"><span></span></a>
            <a href="javascript:;"><span></span></a>
            <a href="javascript:;"><span></span></a>
            <a href="javascript:;"><span></span></a>
            <a href="javascript:;"><span></span></a>
        </div>
    </div>  


jQuery:
 $(function(){
    var $a = $(".buttons a");
    var $s = $(".buttons span");
    var cArr = ["p7","p6","p5","p4","p3","p2","p1"];
    var index = 0;
    $(".rotation_box").find(".prev").click(function(){
        prevImg();
    })
    $(".rotation_box>.next").click(function(){
        nextImg();
    })
    // 上一张
    function prevImg(){
        cArr.unshift(cArr[6]);
        cArr.pop();
        $(".list").find("li").each(function(i,e){
            $(e).removeClass().addClass(cArr[i]);
        })
        index--;
        if (index < 0 ){
            index = 6;
        }
        show();
    }
    //下一张
    function nextImg(){
        cArr.push(cArr[0]);
        cArr.shift();
        $(".list").find("li").each(function(i,e){
            $(e).removeClass().addClass(cArr[i]);
        })
        index++;
        if(index > 6){
            index = 0;
        }
        show();
    }
    //通过点击图片下方按钮切换图片
    $a.each(function(){
        $(this).click(function(){
            var myIndex = $(this).index();
            var b = myIndex - index;
            if(b==0){
                return;
            }else if (b > 0){
                var oldArr = cArr.splice(0,b);
                cArr = $.merge(cArr,oldArr);
                $(".list li").each(function(i,e){

                     $(e).removeClass().addClass(cArr[i]);
                })
                index = myIndex;
                show();
            }else if (b < 0){
                cArr.reverse();
                var oldArr = cArr.splice(0,-b);
                cArr = $.merge(cArr,oldArr);
                cArr.reverse();
                $(".list li").each(function(i,e){

                      $(e).removeClass().addClass(cArr[i]);
                })
                index = myIndex;
                show();
            }
        })
    })
    //根据显示的图片改变图片下方按钮的颜色
    function show(){
 $($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
    }
    //点击class为p2的图片触发前一张图片
    $(document).on("click","p2",function(){
        prevImg();
        return false;   //返回false，让a 不跳转
    })
    //点击class为p4的图片触发后一张图片
    $(document).on("click","p4",function(){
        nextImg();
        return false;   //返回false，让a 不跳转
    })
    //鼠标移入rotation_box时停止旋转
    $(".rotation_box").mouseover(function(){
        clearInterval(timer);
    })
    //鼠标移出rotation_box时开始旋转
    $(".rotation_box").mouseleave(function(){
        timer=setInterval(nextImg,8000);
    })

    timer = setInterval(nextImg,8000);
})