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

Posted 2023-05-08

【中文标题】水平滚动 Jquery 隐藏/显示滚动箭头

【英文标题】：Horizontal Scroll Jquery Hide/Show Scroll Arrows

【发布时间】：2013-01-08 17:50:22

【问题描述】：

我正在尝试构建一个带有前进和后退箭头的水平滚动站点（您可以在此处查看粗略的 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");
   );
);

到目前为止，这工作正常。但是，我想补充两点。首先，在初始显示上，应该没有向左箭头，因为左侧没有要查看的内容，我不希望用户只是滚动到空白区域。

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

似乎无法找出最好的方法...

任何帮助将不胜感激。

【问题讨论】：

但是右边也没有内容可以查看，因为文字换行了。你通过增加边距来强迫它。这是故意的吗？

我不知道为什么文本会换行，这不是故意的。实际站点上的内容将是图像和文本（有点像时间轴），因此该部分的宽度至少为 3000 像素。我正在尝试做的与此类似：jsfiddle.net/9hubz 但这也存在左右可访问空白的问题。

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

【参考方案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。

【讨论】：

这是一个有趣的方法，但你欺骗了<section style="white-space: nowrap"> (:

当 dwyane-wade 说他不打算在 jsFiddle 中换行时，我不明白这是怎么作弊的。

有趣的方法。我使用的是正确的属性而不是边距 :) 它没有使其响应

【参考方案2】：

您可以获取部分的margin-left 值并将其用于编写条件。不要忘记在 animate 函数的回调函数中使用条件来获取准确的值。

Here is 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，这可能会造成冲突。

【参考方案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>

DEMO

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