初学jquery，自己写的一个jquery幻灯片，代码有些笨拙，希望有大神可以指点一二，精简一下代码

html代码

	<div class="picCon">
		<div class="bigPic">
			<ul>
				<li class="cur"><img src="5682865a05cd9.jpg" alt="" /></li>
				<li><img src="5682865c5cefe.jpg" alt="" /></li>
				<li><img src="5682865ed9f9f.jpg" alt="" /></li>
				<li><img src="56828655b0373.jpg" alt="" /></li>
				<li><img src="56828657ce6c0.jpg" alt="" /></li>
				<li><img src="5682865396a34.jpg" alt="" /></li>
			</ul>
		</div>
		<div class="smallPic">
			<a href="javascript:void(0);" class="left"><</a>
			<div class="smallpiccontent">
				<ul class="smallPicCon">
					<li class="active"><img src="5682865a05cd9.jpg" alt="" /></li>
					<li><img src="5682865c5cefe.jpg" alt="" /></li>
					<li><img src="5682865ed9f9f.jpg" alt="" /></li>
					<li><img src="56828655b0373.jpg" alt="" /></li>
					<li><img src="56828657ce6c0.jpg" alt="" /></li>
					<li><img src="5682865396a34.jpg" alt="" /></li>
				</ul>
			</div>
			<a href="javascript:void(0);" class="right">></a>
		</div>
	</div>

　　css代码

		*{margin:0;padding:0;list-style-type:none;text-decoration:none;}
		.picCon{637px;height:auto;overflow:hidden;margin:60px auto;}
		.bigPic{637px;height:393px;position:relative;}
		.bigPic li{637px;height:393px;left:0;top:0;position:absolute;display:none;}
		.bigPic li img{637px;height:393px;}
		.bigPic .cur{display:block;}
		.smallPic{637px;height:120px;margin-top:50px;float:left;}
		a{30px;height:120px;line-height:120px;text-align:center;background:#ccc;color:red;font-size:18px;}
		.left{float:left;}
		.right{float:right;}
		.smallpiccontent{570px;float:left;overflow:hidden;position:relative;height:120px;}
		.smallPicCon{1131px;position:absolute;left:0;}
		.smallPicCon li{border:1px solid #fff;float:left;167px;height:118px;margin:0 5px;}
		.smallPicCon li img{167px;height:118px;}
		.smallPicCon .active{border-color:#f00;}

　　jquery代码

		$(document).ready(function(){
			var imgNum = 0;
			var li_width = $(".smallPicCon li").width();
			var index_ = $(".smallPicCon li").index();
			$(".right").click(function(){
				if(imgNum<index_){
					imgNum++
				}else{
					imgNum = 0
				};
				$(".smallPicCon li:eq("+imgNum+")").addClass("active").siblings().removeClass("active");
				$(".bigPic ul li:eq("+imgNum+")").fadeIn().siblings().fadeOut();
				if((imgNum > 1) && (imgNum < index_)){
					var left=li_width*(imgNum-1);
					$(".smallPicCon").animate({
						left:-left
					})
				}else if(imgNum<=1){
					$(".smallPicCon").animate({
						left:0
					})
				}
			})
			$(".left").click(function(){
				if(imgNum<0){
					imgNum = index_
				}else{
					imgNum--
				}
				$(".smallPicCon li:eq("+imgNum+")").addClass("active").siblings().removeClass("active");
				$(".bigPic ul li:eq("+imgNum+")").fadeIn().siblings().fadeOut();
				if(imgNum<0){
					imgNum = index_;
					var left=li_width*(imgNum-2);
					$(".smallPicCon").animate({
						left:-left
					})
				}else if((imgNum < index_) && (imgNum >0)){
					var left=li_width*(imgNum-1);
					$(".smallPicCon").animate({
						left:-left
					})
				}
			})
		})