用一個陣列來儲存圖片，在點擊的時候切換圖片的 index 並加上動畫完成。

 

var imgArr=["https://uniform.wingzero.tw/assets/images/clothes_v1.png", "https://uniform.wingzero.tw/assets/images/clothes_v2.png", "https://uniform.wingzero.tw/assets/images/clothes_v3.png", "https://uniform.wingzero.tw/assets/images/clothes_v4.png"];
var arrLength=imgArr.length;
var lmgLast=arrLength-1;
var nowPic=1;

$(".circle_btn").click(function(){
	var dir=$(this).data("dir");
  if(dir=="next"){
  	var out = imgArr.splice(0, 1);
    imgArr.push(out);
    nowPic=(nowPic+1)%arrLength;
  }else{
  	var out = imgArr.splice(lmgLast, 1);
    imgArr.unshift(out);
    nowPic=(nowPic-1)%arrLength;
  }
  
  $(".circle1 img").attr("src", imgArr[0]);
  $(".circle2 img").attr("src", imgArr[2]);
  
  $(".img_center img").removeClass();
  
  $(".img_center img").eq(nowPic).addClass("active");
  
});

 

完整程式碼