0

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

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

我将其分解为以下需求：

  1. 循环并索引列表项的数量
  2. 获取当前位置
  3. 每次单击“向下”按钮时，移动位置 -41px
  4. 每次单击“向上”按钮时，将位置移动 +41px
  5. 动画过渡
  6. 连续循环 - 当最后一个可见时从最后一个到第一个

我在上面遗漏了什么吗？我该怎么做？谢谢你的知识！

4

2 回答 2

2

你必须改变 position:relative CSS to your li

#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'});
});

演示 ​</p>

于 2012-05-03T16:03:28.517 回答
1 
<!-- 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();
        }
}
});
于 2012-05-03T16:38:53.790 回答