图片自动轮播问题

<!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=utf-8" />
<title></title>
<style>
body{ margin:0; padding:0; font-size:12px; background:#fff}
ul, li{ list-style-type:none; margin:0; padding:0; font-weight:normal; font-style:normal}
.btn{ height:16px; float:left; padding:20px}
.btn a{ width:16px; height:16px; text-align:center; line-height:16px; font-size:11px; float:left; margin-left:5px; cursor:pointer; background:#00F; color:#fff}
.btn a:hover, .btn .cur{ background:#F60; text-decoration:none}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
PicEve()
})var i,sum,text;function PicEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");
sum = $pic_li.length;
text="";
for( b=0; b<sum; b++){
text += "<a></a>"
}
$btn.html(text)
$btn.find("a").each(function(b,n){
$(n).attr("index",b)
$(n).html(b+1)
})
$btn.find("a").eq(0).addClass("cur")
$btn.find("a").click(function(e){
i=parseInt($(this).attr("index"));
c=parseInt($("#btn a[class='cur']").attr("index"));
if( i!=c ){
$btn.find("a").removeClass("cur");
$(this).addClass("cur");
}
//clearInterval(Play);
});
//$(document).mouseout(function(e){
// setInterval(PlayEve, 2000);
//    });
}
//自动播放
var Play = setInterval(PlayEve, 2000);
function PlayEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");

i=parseInt($("#btn a[class='cur']").attr("index"))
sum = $pic_li.length;
if( i < sum - 1){
$btn.find("a").eq(i).removeClass("cur");
$btn.find("a").eq(i+1).addClass("cur");
i++
}else if(i==sum-1){
$btn.find("a").eq(sum-1).removeClass("cur");
$btn.find("a").eq(0).addClass("cur");
i=0
}
}
</script>
</head>
<body>
    <ul id="pic" class="pic">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="btn" class="btn"></div>
</body>
</html>
复制代码就可以用，这是我自己写的图片轮播的部分代码，现在想加一个功能，当鼠标点击数字按钮时就停止轮播，当鼠标移开当前点击的数字按钮时就接着轮播，上面加 //的就是我自己加的停止轮播代码，但实现不了，麻烦各位帮下忙。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

$btn.find("a").mouseover(function () { clearInterval(Play)});
            $btn.find("a").mouseleave(function(){setInterval(PlayEve, 2000)});
这样可以。。但感觉效果不完整
主要是当再加这句setInterval(PlayEve, 2000)的时候效果好像叠加了
$btn.find("a").mouseover(function () { clearInterval(Play)});
        $btn.find("a").mouseleave(function () { clearInterval(Play); setInterval(PlayEve, 1000) });
这样效果又要好点。。
已解决$(function(){
PicEve();
})
var i,sum,text;function PicEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");
sum = $pic_li.length;
text="";
for( b=0; b<sum; b++){
text += "<a></a>"
}
$btn.html(text)
$btn.find("a").each(function(b,n){
$(n).attr("index",b)
$(n).html(b+1)
})
$btn.find("a").eq(0).addClass("cur");

var Play = setInterval(PlayEve, 2000);
$btn.find("a").click(function(){
$(this).attr("name",1)
i=parseInt($(this).attr("index"));
c=parseInt($("#btn a[class='cur']").attr("index"));
if( i!=c ){
$btn.find("a").removeClass("cur");
$(this).addClass("cur");
}
clearInterval(Play);
})
$btn.find("a").mouseout(function(){
b=parseInt($(this).attr("name"));
i=parseInt($(this).attr("index"));
c=parseInt($("#btn a[class='cur']").attr("index"));
if( i==c && b==1 ){
Play = setInterval(PlayEve, 2000);
$(this).attr("name",0)
}
})
}
function PlayEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");

i=parseInt($("#btn a[class='cur']").attr("index"))
sum = $pic_li.length;
if( i < sum - 1){
$btn.find("a").eq(i).removeClass("cur");
$btn.find("a").eq(i+1).addClass("cur");
i++
}else if(i==sum-1){
$btn.find("a").eq(sum-1).removeClass("cur");
$btn.find("a").eq(0).addClass("cur");
i=0
}
}