Question

我有一个事件安排，ul有固定的高度和溢出隐藏，li也有固定的高度。一次只能看到四个。我需要弄清楚如何在单击相应按钮的情况下向上和向下滚动列表。

我确信有插件可以做到这一点，但为了更好地理解jQuery / JS我想自己做 - 但需要一些帮助。 HTML / CSS在这里http://jsfiddle.net/DirtyBirdDesign/BJdJ7/

我已将其分解为以下需求：

循环并索引列表项的数量
获取当前位置
每次点击“向下”按钮，移动位置-41px
每次点击“向上”按钮，移动位置+ 41px
为过渡制作动画
连续循环 - 当最后一个可见时从最后一个到第一个

我错过了上面的任何内容吗？我该怎么做？谢谢你的知识！

Answer 1

你必须改变位置：相对CSS你的李

#PartnerSchedule ul#PartnerEvents li {
  position:relative;
  width:457px;
  height:41px;
  margin:0 0 2px 0;
  padding:0 10px;
  font:.9em/1.75em "Helvetica Neue", Arial, Helvetica, Genevea, sans-serif;
  overflow: hidden;
  }

此脚本是您的解决方案，您可以添加控件以在达到限制时停止滚动。

$('#up').click(function(){
    $('#PartnerEvents li').animate({top:'-=43'});
});
$('#down').click(function(){
    $('#PartnerEvents li').animate({top:'+=43'});
});

DEMO

Answer 2

<!-- language: lang-js -->  

var itemsToShow = 4;

$('#PartnerEvents>li').each(function(i,k) {
    var ele = $(this);
    $(ele).attr('id', 'PartnerEvents' + i);
    if (i >= itemsToShow) //i is zero indexed
    {
        $(ele).hide();
    }
});


$('#up').bind('click', function() {
    if ($('#PartnerEvents0:hidden').length > 0)
    {
        // This means we can go up
        var boundaryTop = $('#PartnerEvents li:visible:first').attr('id');
        var boundaryBottom = $('#PartnerEvents li:visible:last').attr('id');

        if ($('#PartnerEvents li#'+ boundaryTop).prev().length > 0)
        {
            $('#PartnerEvents li#'+ boundaryTop).prev().show();
            $('#PartnerEvents li#'+ boundaryBottom).hide();
        }
    }
});

$('#down').bind('click', function() {
    if ($('#PartnerEvents li:last:hidden').length > 0)
    {
        // This means we can go down
        var boundaryTop = $('#PartnerEvents li:visible:first').attr('id');
        var boundaryBottom = $('#PartnerEvents li:visible:last').attr('id');

        if ($('#PartnerEvents li#'+ boundaryBottom).next().length > 0)
        {
            $('#PartnerEvents li#'+ boundaryBottom).next().show();
            $('#PartnerEvents li#'+ boundaryTop).hide();
        }
}
});

获取无序列表的索引并单击滚动位置（向上和向下）

2 个答案: