javascript - 带缩略图的图片切换，点完缩略图(隔着点)后上一张下一张不同步了

Question

        window.onload = function(){
           
            var oSp = document.getElementById("p3");
            var oImg = document.getElementById("img1");
            var oSimg = document.getElementById("img2");
            var oLeft = document.getElementById("left");
            var oRight = document.getElementById("right");
            var oUl = document.getElementById("list");
            var aLi = oUl.getElementsByTagName("li");
            var aImg = oUl.getElementsByTagName("img");
            var arrImg = ["1.jpg","2.jpg","3.jpg","4.jpg"];
            var arrZb = ["160","180","200","220"];
            var num = 0;
               
            function Tab(){
                oImg.src=arrImg[num];
                aImg[num].src="fcp_on.png";
            }
            Tab();
            for(var i=0;i<aLi.length;i++){
                aLi[i].index=i
                aLi[i].onmouseover = function(){                  
                    oSp.style.display="block";
                    oSimg.src=arrImg[this.index];
                    oSp.style.left=arrZb[this.index]+"px"
                }
                aLi[i].onmouseout = function(){                    
                    oSp.style.display="none";                    
                }
                aLi[i].onclick=function(){
                    for(var i=0;i<arrImg.length;i++){
                    aImg[i].src="fcp.png"
                }
                    oImg.src=arrImg[this.index];
                    aImg[this.index].src="fcp_on.png";
                }


            }
            
            oLeft.onmouseover=function(){
                    oLeft.style.background="#ccc"
                    
                }
            oLeft.onmouseout=function(){
                    oLeft.style.background=""
                }
            oRight.onmouseover=function(){
                    oRight.style.background="#ccc"
                    
                }
            oRight.onmouseout=function(){
                    oRight.style.background=""
                }
            oRight.onclick=function(){  
                num++;
                 if(num>arrImg.length-1){
                    num=0;
                }
                for(var i=0;i<arrImg.length;i++){
                    aImg[i].src="fcp.png"
                }
                Tab();

            }
            oLeft.onclick=function(){  
                num--;
                 if(num<0){
                    num=arrImg.length-1;
                }
                for(var i=0;i<arrImg.length;i++){
                    aImg[i].src="fcp.png"
                }
                Tab();

            }
            
        }