jquery - 水平滚动 Jquery 隐藏/显示滚动箭头

Question

我正在尝试构建一个水平滚动网站，带有前进和后退箭头(您可以在此处查看粗略的 js fiddle : http://jsfiddle.net/KcDqu/5/ )

这是我迄今为止得到的 jquery:

$(document).ready(function() {
$('a.right-arrow').click(function() {
   $('section').animate({
   marginLeft: "+=920"
   }, "medium");
   });
   $('a.left-arrow').click(function() {
   $('section').animate({
   marginLeft: "-=920"
   }, "medium");
   });
});

到目前为止效果很好。不过，我想补充两点。首先，在初始显示上，不应该有向左箭头，因为左侧没有可查看的内容，而且我不希望用户只是滚动到空白区域。

其次，当出于同样的原因没有更多内容显示在右侧时，我希望隐藏右箭头。

似乎无法找出执行此操作的最佳方法...

任何帮助将不胜感激。

Answer 1

代码有点困难，因为水平幻灯片被硬编码为 920，而这并不总是窗口的宽度。这会导致根据窗口的大小跳过一些内容。

让箭头与此 jQuery 一起正常工作:

$(document).ready(function () {
    var leftMargin = 0;
    var width = $(document).width();
    var windowWidth = $(window).width();
    $('.left-arrow').click(function () {
        $('section').animate({
            marginLeft: "+=" + windowWidth 
        }, "medium");

        $('.right-arrow').show();
        leftMargin = (leftMargin - windowWidth)
        if (leftMargin == 0) {
            $('.left-arrow').hide();
        }
    });
    $('.right-arrow').click(function () {
        $('section').animate({
            marginLeft: "-=" + windowWidth
        }, "medium");

        $('.left-arrow').show();
        leftMargin = (leftMargin + windowWidth);
        if (leftMargin > width - windowWidth) {
            $('.right-arrow').hide();
        }
    });
});

这还将设置您的箭头滑动到窗口的宽度，因此不会错过任何内容。

还有jsFiddle

编辑:删除了不需要的其他内容。