轮播图 带有缩略图

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

主要的还是缩略图的点击 放大 缩小 以及大于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