Question

我正在创建一个滑块，我正在试图弄清楚我是如何专门编写按钮的。

我希望它在点击时以700 pxs的增量向左移动，但是一旦marginLeft大于2800像素，它就不会在点击时做任何事情。

现在我有一个以增量方式移动容器的部分，但是我不知道如何在“slider_container”的marginLeft大于2800像素之后使该部分无效。

$("#left").click(function () {
    $("#slider_container").animate ({
        marginLeft: "+=700px"
    },450 );
});

我想知道以下为什么不起作用：

if ($("#slider_container").css("marginLeft") >= 2800) {
      $("#right").click(function () {
    $("#slider_container").animate ({
        marginLeft: "-=0px"
    },450 );
});  
}
else
{
    $("#right").click(function () {
    $("#slider_container").animate ({
        marginLeft: "-=700px"
    },450 );
});  

}

Answer 1

试试这个：

$("#left").click(function () {
    var margin = parseInt($("#slider_container").css("marginLeft")),
        move = Math.min(700, 2800 - margin);
    if (move > 0) {
        $("#slider_container").animate ({
            marginLeft: "+=" + move + "px"
        },450 );
    }
});

在刚刚添加到问题中的代码中，您需要将if放在function内以进行点击事件。另外，animate to "-=0px"，它有意义吗？

Answer 2

好吧，我把它弄好了，这是我提出的解决方案：

$("#right").click(function () {


if (parseInt($("#slider_container").css("marginLeft")) < -2100) {
    $("#slider_container").animate ({
        marginLeft: -2800
    },450 ); 
}
else
{
    $("#slider_container").animate ({
        marginLeft: "-=700px"
    },450 ); 

}
});

$("#left").click(function () {


if (parseInt($("#slider_container").css("marginLeft")) > -699) {
    $("#slider_container").animate ({
        marginLeft: 0
    },450 ); 
}
else
{
    $("#slider_container").animate ({
        marginLeft: "+=700px"
    },450 ); 

}
});

创建增量按钮，如果边距大于2800像素，则关闭该按钮

2 个答案: