轮播图 带有缩略图

设计给了个图 要求轮播带有 缩略图 选样式还要放大 如下图
在网上找了下没有有相似的 但还是与设计图有些差距 无奈
找了原来的代码 以此为基础 改呗

主要的还是缩略图的点击 放大 缩小 以及大于5时选中第5个小图时 整体滚动就是个小的轮播
无论是点击上一个、下一个、还是缩略图 当选中的缩略图为 第一个或第五个时（下图选中放大的为第三个） 做判断
第一个：获取当前元素前面有几个兄弟元素 如果大于等于4（之所以是4 缩略图最多展示5个 在去掉选中的）则向右动画margin-left四个图片尺寸（尺寸=图片宽度+图片间隔）
否则小于4 则向右动画margin-left 相应数量图片尺寸
第五个：与第一个相反 获取的是当前元素后面的兄弟元素

当当前缩略图已经是第一个时 点击上一页 则动画到最后一个
当当前缩略图已经是最后一个时 点击下一页 则动画到第一个

注：判断第一个与第五个时用的是 $(".breviary").find(".hover").position().left; 看偏移量 如果图片宽度 或其他位置改变 这个偏移量需要改

					<div id="carousel">
						<ul class="picture">
							<li><img src="img/z1.jpg"></li>
							<li><img src="img/z2.png"></li>
							<li><img src="img/z3.png"></li>
							<li><img src="img/z4.jpg"></li>
							<li><img src="img/z5.png"></li>
							<li><img src="img/z6.jpg"></li>
							<li><img src="img/z7.png"></li>
						</ul>
						<span class="pre">
							<div class="info_sprite"></div>
						</span>
						<span class="next">
							<div class="info_sprite"></div>
						</span>
						<span class="banner_bg"></span>
						<div class=" breviary">
							<ul class="follow">
								<li class="hover"><img src="img/z1.jpg"></li>
								<li><img src="img/z2.png"></li>
								<li><img src="img/z3.png"></li>
								<li><img src="img/z4.jpg"></li>
								<li><img src="img/z5.png"></li>
								<li><img src="img/z6.jpg"></li>
								<li><img src="img/z7.png"></li>
							</ul>
						</div>
					</div>

		// 轮播图
		 var play = function (){
			var $picture = $('.picture'),
				$pictureS = $picture.children(),
				$pre = $('.pre'),
				$next = $('.next'),
				$follow = $('.follow'),
				$imgS = $pictureS.length,
				$imgWidth = $pictureS.width();
			
			var thumbnail_num = 5, //展示缩略图数量
				small_thumbnail_num = 4,//小图数
				small_thumbnail_w = 112,//小图宽度
				small_thumbnail_h = 57,//小图高度
				big_thumbnail_w = 132,//大图宽度
				big_thumbnail_h = 66,//大图高度
				borderWidth = 2,//图片边框 选中样式
				img_interval = 8;// 图片间隔距离
				img_W = img_interval + small_thumbnail_w;// 小图占据宽度 加间隔距离

			//图片少于 5个 后面不在执行
			if($imgS <= thumbnail_num){
				$follow.addClass("text_align_c")
			}
			if($imgS < 2){return}

			$picture.prepend($pictureS.last().clone());
			$picture.append($pictureS.first().clone());
			imgtotal = $picture.children().length;
			$picture.css({left:0-$imgWidth,width:imgtotal*$imgWidth});

			var curIdx = 0;
			var isAnimate = false;

			if($imgS >= thumbnail_num){
				$follow_first_img_w = $follow.children().outerWidth(true);
				$follow.width(($imgS - 1) * img_W + $follow_first_img_w);
			}

			$pre.on('click',function(){
				 playPre();
			});
			$next.on('click',function(){
				 playNext();
			});
			$follow.find('li').on('click',function(){
				 var $idx = $(this).index();
				 if($idx > curIdx){
				 	playNext($idx - curIdx);
				 }else if($idx < curIdx){
				 	playPre(curIdx - $idx);
				 }
			});

			playGo();

			function playPre(idx){
				var idx = idx || 1;
				if(isAnimate){return};
				isAnimate = true;
				$picture.animate({left: '+=' + ($imgWidth*idx)},function(){
					curIdx = ($imgS + curIdx - idx)%$imgS;
					if(curIdx === ($imgS - 1)){
						$picture.css({left: 0-$imgWidth*$imgS});
					}
					isAnimate =false;
					follow(1);
				})
			}

			function playNext(idx){
				var idx = idx || 1;
				if(isAnimate){return}
				isAnimate = true;
				$picture.animate({left: '-=' + ($imgWidth*idx)},function(){
					curIdx = (curIdx + idx)%$imgS;
					if(curIdx === 0){
						$picture.css({left: 0-$imgWidth});
					}
					isAnimate = false;
					follow(2);
				})
			}

			function follow(direction){
				//选中的图片添加边框
				$follow.children().removeClass('hover')
						.eq(curIdx).addClass('hover');	
				
				//动画大图变小图
				$follow.children().eq(curIdx).siblings().find("img").animate({
					width: small_thumbnail_w,
					height: small_thumbnail_h,
					borderWidth: "0px"
				})
				//动画小图变大图	
				$follow.children().eq(curIdx).find("img").animate({
					width: big_thumbnail_w,
					height: big_thumbnail_h,
					borderWidth: borderWidth
				})
				//图片数量大于 5
				if($imgS >= thumbnail_num){
					var $follow_li = $follow.children();
					var $follow_li_len = $follow_li.length;
					//获取 当前元素前面的兄弟元素
					var $first_li =  $follow_li.eq(curIdx).prevAll();
					var $first_li_len = $first_li.length;
					//获取 当前元素后面的兄弟元素
					var $last_li =  $follow_li.eq(curIdx).nextAll();
					var $last_li_len = $last_li.length;

					//下一页
					if(direction == 2){
						//获取匹配元素相对父元素的偏移 用于判断显示的缩略图中当前位于第五
						var to_left_num = $(".breviary").find(".hover").position().left;
						if(curIdx != 0 && to_left_num > 400){
							if($last_li_len >= small_thumbnail_num){
								$follow.animate({
									marginLeft: -(img_W*small_thumbnail_num),
								})
							}else if($last_li_len < small_thumbnail_num){
								var style = $(".follow").attr("style");
								var _num_px = style.split("margin-left: ")[1];
								var _num = _num_px == undefined ? 0 : _num_px.replace("px;",'')
								$follow.animate({
									marginLeft: -(img_W * $last_li_len + -_num),
								})
							}
						}
					}
					//上一页
					if(direction == 1){
						//获取匹配元素相对父元素的偏移 用于判断显示的缩略图中当前位于第一
						var to_left_num = $(".breviary").find(".hover").position().left;
						if(curIdx == $follow_li_len - 1){
							$follow.animate({
								marginLeft: -( img_W*($follow_li_len-thumbnail_num) ),
							})
						}
						click_img_and_left()
					}
					//点击缩略图
					if(curIdx == 0){
						$follow.animate({
							marginLeft: 0,
						})
					}
					click_img_and_left()
					function click_img_and_left(){
						if(to_left_num == -8 && $first_li_len >= small_thumbnail_num){
							$follow.animate({
								marginLeft: -( img_W * ($first_li_len - small_thumbnail_num) ),
							})
						}else if(to_left_num == -8 && $first_li_len < small_thumbnail_num){
							$follow.animate({
								marginLeft: 0,
							})
						}
					}
				}
			}

			function playGo(){
				colck = setInterval(function(){
					playNext();
				},4000);
			}
			$("#carousel").hover(function(){
				clearInterval(colck)
			},function(){
				playGo()
			})
		};
		play();

	/*轮播图*/
	.account_img_box{
		margin-top: 32px;
	}
	#carousel,.picture img{
		width: 847px;
		height: 432px;
	}
	#carousel{
		position: relative;
		margin-top: 24px;
		overflow: hidden;
	}
	.picture{
		position: absolute;
		font-size: 0;
	}
	.picture>li{
		display: inline-block;
	}
	.pre,.next{
		width: 28px;
		height: 60px;
		display: block;
		background: #000;
		opacity: .5;
		color: #fff;
		position: absolute;
		top: 50%;
		margin-top: -20px;
		cursor: pointer;
		z-index: 1;
	}
	.pre{
		left: 0;						
	}
	.next{			
		right: 0;
	}
	.pre .info_sprite{
		width: 10px;
		height: 15px;
		background-position: -730px 0;
		margin: 22px 0 0 8px;
	}
	.next .info_sprite{
		width: 10px;
		height: 15px;
		background-position: -739px 0;
		margin: 22px 0 0 11px;
	}
	.breviary{
		position: absolute;
		bottom: 19px;
		left: 50%;
		width: 616px;
		height: 70px;
		overflow: hidden;
		margin-left: -308px;
	}
	.banner_bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 847px;
		height: 432px;
		background: url(https://blog.csdn.net/img/banner_bg.png) no-repeat;
		background-position: 0 272px;
	}
	.follow{
		font-size: 0;
	}
	.text_align_c{
		text-align: center;
	}
	.follow>li{
		display: inline-block;
		margin-left: 8px;
		margin-top: 6px;
		cursor: pointer;
		vertical-align: top;
		transition: All 0.3s ease-in-out;
		-webkit-transition: All 0.3s ease-in-out;
	}
	.follow>li.hover{
		margin-top: 0;
	}
	.follow>li:first-child{
		margin-left: 0;
	}
	.follow>li:first-child img{
		width: 132px;
		height: 66px;
		border: 2px solid #fff;
	}
	.follow>li img{
		width: 112px;
		height: 57px;
	}
	.follow .hover img{
		border: 0px solid #fff;
	}