Question

我创建了一个简单的内容/框滑块，它使用以下javascript：

$('#left').click(function () {
    $('#videos').animate({
        marginLeft: '-=800px'
    }, 500);
});
$('#right').click(function () {
    $('#videos').animate({
        marginLeft: '+=800px'
    }, 500);
});

以下是演示：http://jsfiddle.net/tjset/2/

我想做什么，我无法弄清楚如何在所有方框滑动时显示和隐藏箭头（左右方框）。

所以我点了4次左边的时间，然后滑下了所有的盒子！然后隐藏“左”，这样你就不能给出更多的-800px

我该怎么办？

Answer 1

有很多jQuery插件可供选择。首先确定有多少结果，然后确定您想要多少可见，然后使用另一个变量来跟踪左边隐藏的数量和右边隐藏的数量。所以......

var total = TOTAL_RESULTS; var leftScrolled = 0; var rightScrolled = total - 3; // minus 3, since you want 3 displayed at a time. 而不是使用marginLeft我会将所有这些包装在包装器中并将位置设置为绝对。然后使用“left”属性或“right”进行动画处理。要做到这一点需要很多代码，不是很多，但是因为有很多插件，我认为你最好搜索jquery.com获取插件并寻找如何做到这一点的例子。 marginLeft不是一种可行的方法，因为它会导致许多查看问题，具体取决于您使用的浏览器版本。

Answer 2

您可以做的是在动画完成后进行检查，以查看margin-left属性是否小于或大于视频<div>的范围。如果是，则根据单击的导航按钮隐藏相应的导航链接。

查看以下代码：

$('#left').click(function () {
    // reset the #right navigation button to show
    $('#right').show();
    $('#videos').animate({
        marginLeft: '-=800px'
    }, 500, 'linear', function(){
        // grab the margin-left property
        var mLeft = parseInt($('#videos').css('marginLeft'));

        // store the width of the #video div
        // invert the number since the margin left is a negative value
        var videoWidth = $('#videos').width() * -1;

        // if the left margin that is set is less than the videoWidth var,
        //  hide the #left navigation. Otherwise, keep it shown
        if(mLeft < videoWidth){
            $('#left').hide();
        } else {
            $('#left').show();
        }
    });
});

// do similar things if the right button is clicked
$('#right').click(function () {
    $('#left').show();
    $('#videos').animate({
        marginLeft: '+=800px'
    }, 500, 'linear', function(){
        var mRight = parseInt($('#videos').css('marginLeft'));
        if(mRight > 100){
            $('#right').hide();
        } else {
            $('#right').show();
        }
    });
});

查看jsfiddle：

http://jsfiddle.net/dnVYW/1/

如果滑倒，则滑动带有边距的盒子检查

2 个答案: