用一個陣列來儲存圖片,在點擊的時候切換圖片的 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"); });