0

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

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

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

我想要做什么，我不知道如何在所有框滑动时显示和隐藏箭头（左右框）。

所以我向左点击了 4 次并滑动了所有的框！然后隐藏“左”，这样你就不能给更多 -800px

我能做些什么？

4

2 回答 2

1

为此有很多 jQuery 插件。首先确定有多少结果，然后确定要显示多少，然后使用另一个变量来跟踪左侧隐藏的数量和右侧隐藏的数量。所以...

var total = TOTAL_RESULTS; var leftScrolled = 0; var rightScrolled = total - 3; // minus 3, since you want 3 displayed at a time. 而不是使用marginLeft，我会将所有这些包装在包装器中并将位置设置为绝对位置。然后使用“左”属性或“右”设置动画。执行此操作需要大量代码，但并不多，但由于有很多插件，我认为您最好在 jquery.com 上搜索插件并查找有关如何执行此操作的示例。marginLeft 不是要走的路，因为根据您使用的浏览器版本，它可能会导致许多查看问题。

于 2013-08-01T21:16:20.637 回答
1

您可以做的是在动画完成后检查该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/

于 2013-08-01T21:19:20.253 回答