<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>

		*{margin:0;padding:0;list-style-type:none;text-decoration:none;}

		.picCon{width:637px;height:auto;overflow:hidden;margin:60px auto;}

		.bigPic{width:637px;height:393px;position:relative;}

		.bigPic li{width:637px;height:393px;left:0;top:0;position:absolute;display:none;}

		.bigPic li img{width:637px;height:393px;}

		.bigPic .cur{display:block;}

		.smallPic{width:637px;height:120px;margin-top:50px;float:left;}

		a{width:30px;height:120px;line-height:120px;text-align:center;background:#ccc;color:red;font-size:18px;}

		.left{float:left;}

		.right{float:right;}

		.smallpiccontent{width:570px;float:left;overflow:hidden;position:relative;height:120px;}

		.smallPicCon{width:1131px;position:absolute;left:0;}

		.smallPicCon li{border:1px solid #fff;float:left;width:167px;height:118px;margin:0 5px;}

		.smallPicCon li img{width:167px;height:118px;}

		.smallPicCon .active{border-color:#f00;}

		$(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

					})

				}

			})

		})