Jquery点击切换图片

功能效果图如下：

点击左右切换按钮时，图片左右按顺序切换。

点击下面的小图片时，切换为对应的图片。

当前显示的图片对应的底下的小图片加外边框（这里是蓝色，可能不太看得清，在第四张小图外面）。

主要思路是，将span里的自定义属性data-index与两组图片的索引值挂钩。

HTML部分代码：

<section id="showimg-left-section" >
    <div class="row">
	<span class="col-xs-0 col-sm-2 col-md-2 col-lg-2" data-index="0">
	    <img src="arrow-left.png" />
	</span>
	<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
	    <ul>
		<li><img src="1520907278.jpg" /></li>
		<li><img src="1520907706.jpg" /></li>
		<li><img src="1520907373.jpg" /></li>
		<li><img src="1520907706.jpg" /></li>
	    </ul>
	</div>
	<span class="col-xs-0 col-sm-2 col-md-2 col-lg-2" data-index="0">
	    <img src="arrow-right.png" />
	</span>
    </div>
    <ul class="btn-img">
	<li class="active"><img src="1520907278.jpg" /></li>
	<li><img src="1520907706.jpg" /></li>
	<li><img src="1520907373.jpg" /></li>
	<li><img src="1520907706.jpg" /></li>
    </ul>
</section>

JQuery部分代码如下：

需要判断两种极端情况：

1、a==0时，点击后a应该等于图片数组长度-1，即切换到最后一张图；

2、b==图片数组长度-1时，点击后b应该等于0，即切换到第一张图；

$(document).ready(function(){
	var imgList1 = $("#showimg-left-section div ul li").length;
	$("#showimg-left-section div span:eq(0)").click(function(){
		var a = parseInt($(this).attr("data-index"));
		if(a == 0){
			a = imgList1 - 1;
		} else {
			a = a-1;
		}
		move(a);
	});
	$("#showimg-left-section div span:eq(1)").click(function(){
		var b = parseInt($(this).attr("data-index"));
		if(b == imgList1-1){
			b = 0;
		} else {
			b = b+1;
		}
		move(b);
	});
	function move(N){
		$("#showimg-left-section div ul li:eq("+N+")").show().siblings().hide();
		$("#showimg-left-section .btn-img li:eq("+N+")").addClass("active").siblings().removeClass("active");
		$("#showimg-left-section div span").attr("data-index",N);
	}
	$("#showimg-left-section .btn-img li").click(function(){
		var c = $(this).index();
		move(c);
        })
}）

优化：上面红色部分的代码，如下：

$("#showimg-left-section div span").click(function(){
	var index = parseInt($(this).attr('data-index'));
	var imgList1 = $("#showimg-left-section div ul li").length;
	if ($(this).hasClass('_left')) {
		if (index == 0) {
			index = imgList1 - 1;
		} else {
			index -= 1;
		}
	} else {
		if (index == imgList1 - 1) {
			index = 0;
		} else {
			index += 1;
		}
	}
	move(index);
})