jquery自动切换图片

/*CSS*/

.BannerBOX{width:100%; height:425px;  position:relative; overflow:hidden; margin:0 auto; min-width:1100px;}
.cdl li{ width:20px; height:20px; float:left;  list-style:none; background-image:url(../images/banner_yq.png); background-repeat:no-repeat; margin-right:14px;}
.cdl .cdd{background-image:url(../images/banner_hover.png); background-repeat:no-repeat;}
.BannerBOX img{  border:none 0; width: 100%; height: 425px;;}
.BannerBOX ul{position:absolute; width:180px;left:66.5%; bottom:20px;}

/*JS*/

$(function(){
/*点击按钮切换图片*/
$(".cdl li").click(function(){
var x=$(".cdl li").index(this);
n=x;
$(".photo").hide();
$(".photo").eq(x).show();
$(".cdl li").removeClass("cdd");
$(this).addClass("cdd");
});
/*图片自动切换*/
$(".photo").hide();
$(".photo").eq(0).show();
var n=0;
function nup(){
if(n<4){
n=n+1;
}else{n=0;}
$(".photo").hide();
$(".photo").eq(n).show();
$(".cdl li").removeClass("cdd");
$(".cdl li").eq(n).addClass("cdd")
};
var time=setInterval(nup,2000);
$(".BannerBOX").hover(function(){
clearInterval(time)
},function(){
time=setInterval(nup,2000)
});
});

/*html*/

        <div class="BannerBOX">
            <img src="images/banner1.jpg" class="photo"/>
            <img src="images/banner2.png" class="photo"/>
            <img src="images/banner3.jpg" class="photo"/> 
            <img src="images/banner4.jpg" class="photo"/>
            <img src="images/banner5.jpg" class="photo"/>
            <ul class="cdl">
                <li class="cdd"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>   
        </div>