水平滚动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");
   });
});

这个目前看起来还不错。但是，我想要添加两个东西。首先，在初始显示时，左箭头应该没有，因为左侧没有内容可以查看，我不希望用户滚动到空白处。

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

似乎无法找到最佳方法来实现这一点...

非常感谢您提供的任何帮助。

- dwyane-wade

---

但是右侧也没有内容可查看，因为文本换行了。您通过添加边距来强制执行此操作。这是有意的吗？ - nice ass

我不知道为什么文本会换行，这不是预期的结果。实际网站上的内容将包括图像和文本（类似于时间轴），因此该部分的宽度至少为3000px。我试图做的类似于这个：http://jsfiddle.net/9hubz/ 但这也存在左右两侧可访问空白区域的问题。 - dwyane-wade

你找到答案了吗？我想要完全一样的。 - Erlan

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 编辑：删除了else，因为它们是不必要的。

- areich

---

这是一个有趣的方法，但你在<section style="white-space: nowrap">上作弊了(: - Barlas Apaydin

我不明白为什么这算作作弊，因为 Dwyane-Wade 说他并没有打算让文本在 jsFiddle 中换行。 - areich

有趣的方法。我之前使用的是 right 属性而不是 margin :) 这导致它无法响应式。 - ANURAG BHAKUNI

Answer 2

你可以获取区块的 margin-left 值，并在编写条件时使用它。别忘了在动画函数的回调函数中使用条件来获取准确的值。

这里是 jsFiddle。

$(document).ready(function() {
    var windowWidth = $(window).width();
    var maxRange = windowWidth * -2;

    //note: all of the conditions are same
    var val = parseInt($('section').css('margin-left'));
    if( val >= 0 ) { $('.right-arrow').hide();$('.left-arrow').show(); }
    else if( val < 0 && val > maxRange) { $('.right-arrow, .left-arrow').show(); }
    else if( val <= maxRange) { $('.left-arrow').hide();$('.right-arrow').show();  }


    $('a.right-arrow').click(function() {
        $('section').animate({ marginLeft: "+=" +windowWidth+ "px" },600,function() {
            var val = parseInt($('section').css('margin-left'));
            if( val >= 0 ) { $('.right-arrow').hide();$('.left-arrow').show(); }
            else if( val < 0 && val > maxRange) { $('.right-arrow, .left-arrow').show(); }
            else if( val <= maxRange) { $('.left-arrow').hide();$('.right-arrow').show();  }
        });
    });
    $('a.left-arrow').click(function() {
        $('section').animate({ marginLeft: "-=" +windowWidth+ "px" },600,function() {
            var val = parseInt($('section').css('margin-left'));
            if( val >= 0 ) { $('.right-arrow').hide();$('.left-arrow').show(); }
            else if( val < 0 && val > maxRange) { $('.right-arrow, .left-arrow').show(); }
            else if( val <= maxRange) { $('.left-arrow').hide();$('.right-arrow').show();  }
        });
    });
});

请注意，在这些情况下不要使用else，否则可能会产生冲突。

- Barlas Apaydin

Answer 3

通常我会给你一些现有的滑块脚本链接，但我不知道有哪些可以很好地处理调整大小。

所以我从自己的PHP异常处理程序中改编了一些代码：）

$('#list').each(function(){

  var list = $(this),
      currentPos = 0,
      itemCount = list.children().length;

  $('.right, .left').click(function(){

    // +100 = right, -100 = left
    var direction = $(this).hasClass('right') ? 100 : -100,
        nextIndex = direction > 0 ? currentPos + 1 : currentPos - 1;

    // do nothing if there is animation happening,
    // or if index is out of boundaries
    if($('> li', list).is(':animated') 
       || (direction > 0 && nextIndex > itemCount - 1)
       || (direction < 0 && nextIndex < 0)
     ) return;

    var next = $('> li:eq(' + nextIndex + ')', list),
        current = $('> li:eq(' + currentPos + ')', list);

    currentPos = nextIndex;

    // determine if the link needs to be hidden
    $('.left, .right').removeClass('hide');      
    if(currentPos === 0 || currentPos === itemCount - 1)
        $(this).addClass('hide');

    // adjust height of the container
    list.css('height', Math.max(current.outerHeight(true), next.outerHeight(true)) + 'px');

    // make the current slide absolute
    current.css({
      position: 'absolute',
      left: 0,
      top: 0,
      width: '100%',
      height: current.outerHeight(true) + 'px'
    });

    // show the next slide
    next.css({
      position: 'absolute',
      left: direction + '%',
      top: 0,
      width: '100%',
      height: next.outerHeight(true) + 'px'
    }).show().animate({left: '0%'}, 300, 'swing', function(){
      next.css({
        position: 'relative',
        left: 'auto',
        top: 'auto'
      });

    });

    // hide the current slide
    current.animate({left: (-direction) + '%'}, 300, 'swing', function(){
      current.hide();                      
    });                                       

  });

  // mouse wheel action within the list area
  list.mousewheel(function(event, delta){               
    (delta > 0) ? $('.right').click() :$('.left').click();                                 
  });

});           

CSS：

.hide{
  display:none;
}    

#list{
  position: relative;
  width: 100%;
  overflow: hidden;
}

#list > li{
  display: none;
}

#list > li:first-child{
  display: block;
}

HTML 结构应该像这样：

<a class="left"> left </a>
<a class="right"> right </a>

<ul id="list">                    
   <li> ... </li>
   ...         
</ul>

演示

mousewheel jQuery插件。如果您不需要鼠标滚轮支持，请移除最后一个事件。

- nice ass