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

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

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

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

循环并索引列表项的数量

获取当前位置

每次点击“向下”按钮时，移动位置-41px

每次点击“向上”按钮时，移动位置+41px

设置过渡动画

连续循环-当最后一个可见时，从最后一个转到第一个

我在上面遗漏了什么吗？我该怎么办？

---

谢谢你的知识

您必须更改位置：相对于您的li的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'});
});

---

​

您必须更改位置：相对于您的li的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'});
});

​

var itemsToShow=4；
$（'#PartnerEvents>li'）。每个（函数（i，k）{
var ele=$（本）；
$（ele.attr（'id'，'PartnerEvents'+i）；
如果（i>=itemsToShow）//i为零索引
{
$（ele.hide（）；
}
});
$（'#up'）.bind（'click'，function（）{
如果（$（'#PartnerEvents0:hidden'）。长度>0）
{
//这意味着我们可以上去
var boundaryTop=$（'#PartnerEvents li:visible:first'）.attr（'id'）；
var boundarybooth=$（'#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'）。长度>0）
{
//这意味着我们可以下去
var boundaryTop=$（'#PartnerEvents li:visible:first'）.attr（'id'）；
var boundarybooth=$（'#PartnerEvents li:visible:last'）.attr（'id'）；
if（$（'#PartnerEvents li#'+boundaryBottom）.next（）.length>0）
{
$（'#PartnerEvents li#'+boundaryBottom）.next（）.show（）；
$（“#PartnerEvents li#”+boundaryTop.hide（）；
}
}
});

var itemsToShow=4；
$（'#PartnerEvents>li'）。每个（函数（i，k）{
var ele=$（本）；
$（ele.attr（'id'，'PartnerEvents'+i）；
如果（i>=itemsToShow）//i为零索引
{
$（ele.hide（）；
}
});
$（'#up'）.bind（'click'，function（）{
如果（$（'#PartnerEvents0:hidden'）。长度>0）
{
//这意味着我们可以上去
var boundaryTop=$（'#PartnerEvents li:visible:first'）.attr（'id'）；
var boundarybooth=$（'#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'）。长度>0）
{
//这意味着我们可以下去
var boundaryTop=$（'#PartnerEvents li:visible:first'）.attr（'id'）；
var boundarybooth=$（'#PartnerEvents li:visible:last'）.attr（'id'）；
if（$（'#PartnerEvents li#'+boundaryBottom）.next（）.length>0）
{
$（'#PartnerEvents li#'+boundaryBottom）.next（）.show（）；
$（“#PartnerEvents li#”+boundaryTop.hide（）；
}
}
});

请注意，它应该是43像素，因为您的li有2像素的边距，非常好！我已经根据你的例子编辑了这个的需求。我需要它不断循环，也就是说，当最后一个是可见的，下一个是点击循环回到第一个。当前，如果在第一个可见时单击“上一个”，它会不断增加空间，而在最后一个可见时单击“上一个”，反之亦然。下面是您应该做的：单击“上一个”时，检查最后一个li是否在可见区域内，如果在可见区域内，检查是否在可见区域后添加第一个li
现在，只需使用大脑猜测如何使用“下一个”按钮..需要轻轻按一下此处，我想我得到了这个概念-检查它的偏移量是否在特定的裕度范围内，如果不向上移动它。您是否会首先在变量中定义可见对象，然后对照它进行检查？我真的很感激你的帮助，我喜欢这样学习。。。希望这不是你的麻烦。这是一个有效的解决方案，我真的希望你试着理解它，而不仅仅是使用我的代码。注意，它应该是43像素，因为你的li有一个2像素的边距非常好！我已经根据你的例子编辑了这个的需求。我需要它不断循环，也就是说，当最后一个是可见的，下一个是点击循环回到第一个。当前，如果在第一个可见时单击“上一个”，它会不断增加空间，而在最后一个可见时单击“上一个”，反之亦然。下面是您应该做的：单击“上一个”时，检查最后一个li是否在可见区域内，如果在可见区域内，检查是否在可见区域后添加第一个li
现在，只需使用大脑猜测如何使用“下一个”按钮..需要轻轻按一下此处，我想我得到了这个概念-检查它的偏移量是否在特定的裕度范围内，如果不向上移动它。您是否会首先在变量中定义可见对象，然后对照它进行检查？我真的很感激你的帮助，我喜欢这样学习。。。这是一个有效的解决方案，我真的希望你试着理解它，而不是仅仅使用我的代码。我给了你一个非常有效的答案，我可以让它完全满足你的需要！但是你不想做一点努力吗？我想，但我没有建立完整的联系。我在想我需要得到一个孩子李和l的索引