用JQuery做一个焦点轮播图，其中有一点点问题。想问下。

Question

以下是html

<div class="pg3middle">
	<ul class="submit"">
		<li>
			<img src="images/01.jpg" alt="">
			<a href="">XXXXXXX</a>
		</li>						
		<li>
			<img src="images/02.jpg" alt="">
			<a href="">XXXXXXXX</a>
		</li>
		<li>
			<img src="images/03.jpg" alt="">
			<a href="">XXXXXXXX</a>
		</li>
	</ul>
	<div class="packg">
		<div class="next"	href="javascript:()"></div>
		<div class="prev"	href="javascript:()"></div>
	</div>
</div>

CSS是下面

.pg3middle {
	position: absolute;
	left: 50%;
	margin-left: -160px;
	width: 320px;
	overflow: hidden;
}


.submit{
    width: 960px;
    height: 420px;
    position: relative;
    left: -320px;
}

.pg3middle .submit li{
	display: block;
	width: 320px;
	height: 420px;
	float: left;
}

.submit li img{
	display: block;
	width: 320px;
	height: 420px;
	float: left;
}

.pg3middle ul li a{
	display: block;
	width: 300px;
	height:20px;
	position: absolute;
	bottom: 0;
	background:rgba(0,0,0,0.3);
	padding: 10px;
	overflow: hidden;
	line-height: 20px;
	font-size: 14px;
	color: #fff;
}


.next{
    width: 44px;
    height: 53px;
    position: absolute;
    background: url(../images/focus_btn.png) no-repeat -35px -10px;
    right: -44px;
    top: 50%;
    margin-top: -44px;
}

.next:hover{
	background: url(../images/focus_btn.png) no-repeat -35px -84px;
}

.prev{
    width: 44px;
    height: 53px;
    position: absolute;
    background: url(../images/focus_btn.png) no-repeat 0px -10px;
    left: -44px;
    top: 50%;
    margin-top: -44px;
}

.prev:hover{
	background: url(../images/focus_btn.png) no-repeat 0px -84px;
}

做出来就是一个方框，后面3张图，是一个ul+li 的方式，我现在实现了点击prev标签，可以让轮播区（submit）的left值到正确位置，但是next标签就不行。想问问是哪里有问题。下面是JS代码

$(function(){
	var next = $(".packg .next");
	var prev = $(".packg .prev");
	var pg3middle = $(".pg3middle");
	var sub = $(".submit");

	pg3middle.hover(function(){next.stop().animate({right:'0'},500)},
					function(){next.stop().animate({right:'-44px'},500)})

	pg3middle.hover(function(){prev.stop().animate({left:'0'},500)},
					function(){prev.stop().animate({left:'-44px'},500)})

	prev.click(function(){
		sub.animate({left:'+=320px'},500)
		if (sub.css('left') >= '0') {
			sub.stop().animate({left:'-640px'});
		}
	})

	next.click(function(){
		sub.animate({left:'-=320px'},500)
		if (sub.css('left') == '-640px') {
			sub.stop().animate({left:'0'});
		}
	
	})
})

类名命名有点抠脚= =谢谢大神指导~