jq左右按鈕控制內容左右移動

html內容

<div>
    <button id="leftMove">
        《
    </button>
    <div class="cWrap">
        <div>            
                <div>圖片一</div>
                <div>圖片二</div>
                <div>圖片三</div>
                <div>圖片四</div>
                <div>圖片五</div>

        </div>
    </div>
    <button id="rightMove">》</button>
</div>

---

css設置

.cWrap ,.cWrap div {
    display: inline-block;
    margin: 0;
    padding: 0;
    
}
.cWrap{

    width: 500px;
    height: 30px;
    overflow: hidden;
}
.cWrap>div{
    width:1200px;

    transition: 0.5s all ease;

}
.cWrap>div>div{
    width: 200px;
    height: 30px;
    border: 1px solid black;
}
#leftMove,#rightMove{
    margin: 0;
    padding: 0;
    
}
 

---

 

js內容

//櫥窗左右移動按鈕

//x從0開始，++和--的位置可以規避 可能出現在終點值附近的點擊不動情況

var x=0;
$("#leftMove").click(function(){
    x++;
    console.log(x);    
    var p=-200;
    var xp=x*p+"px";
    $(".cWrap").children("div").css("margin-left",xp);

    x=x>3?3:x;
})

$("#rightMove").click(function(){    
    console.log(x);    
    var p=-200;
    var xp=x*p+"px";
    $(".cWrap").children("div").css("margin-left",xp);
    x--;
    x=x<0?0:x;
})

用jq 動畫寫

//用jq動畫animate設置無法限制終止點，還需要加判定才能設置終點
$("#leftMove").click(function(){
   console.log("x");
$(".cWrap").children("div").animate({marginLeft:'-=200px'},500);
}); 
$("#rightMove").click(function(){
    console.log("x");
$(".cWrap").children("div").animate({marginLeft:'+=200px'},500);
});