Jquery使用箭头上下滑动

我试图找到一种简单的方法，使用jquery创建一个包含5个项目的列表，然后按下一个箭头，它会显示另外5个项目，以此类推。如果上下箭头在到达顶部和底部时消失，这将是一个加号。任何帮助都将不胜感激

jquery有很多分页插件。它将通过调整项目的一些代码来节省您的时间

或者如果你想一个人做的话，应该是这样的

<img src="./up.jpg" id="up" class="arrow">
<img src="./down.jpg" id="down" class="arrow">
<ul id="items">
  <li>1</li>
  ....
  <li>30</li>
</ul>

<script type="text/javascript">
  $(document).ready(function() {
    $('#items li').hide().slice(0, 4).show();

    $(".arrow").click(function(){
      var arrow = $(this).attr("id");
      if(arrow == 'down') {
         $('#items li:visible').last().nextAll().slice(0, 4).show("slow");
         //or $('#items li:hidden').slice(0, 4).show("slow");
      } 
      else if(arrow == 'up') {
         $('#items li:visible').slice(-1, -4).hide("slow");
      }
      if ($('#items li:visible').length > 0)  $('#up').fadeOut();
      else  $('#up').show();
      if ($('#items li:hidden').length > 0)  $('#down').show();
      else $('#down').fadeOut();
    });
  });
</script>

一,
....
三十

$（文档）.ready（函数（）{
$（'#items li'）.hide（）.slice（0,4.show（）；
$（“.arrow”）。单击（函数（）{
var arrow=$（this.attr（“id”）；
如果（箭头==“向下”）{
$（'#items li:visible'）.last（）.nextAll（）.slice（0,4）.show（“slow”）；
//或$（'#items li:hidden'）。切片（0，4）。显示（“慢”）；
} 
否则，如果（箭头==‘向上’）{
$（'#items li:visible'）。切片（-1，-4）。隐藏（“slow”）；
}
if（$（'#items li:visible'）.length>0）$（'#up'）.fadeOut（）；
else$（'#up'）.show（）；
如果（$（'#items li:hidden'）.length>0）$（'#down'）.show（）；
else$（'下跌'）.fadeOut（）；
});
});

---

附言：我无法测试它

这应该可以，测试过了

<script type="text/javascript">
    $(document).ready(function() {
        //hide all list items, and show the first 5 items
        $('#items li').hide().slice(0, 5).show();
        //hide the up button
        $('#up').hide();

        var length = $('#items li').length;
        var current_page = 0;
        var per_page = 5;

        $(".arrow").click(function(){
         var arrow = $(this).attr("id"); 
         if(arrow == 'down') {
          current_page = current_page + 1; //increment the page
          if (length >= current_page*per_page) { //check if it's possible page
           $('#items li').hide().slice((current_page*per_page), (current_page*per_page+per_page)).fadeIn(); //show the next page
          }
         } 
         else if(arrow == 'up') {
          current_page = current_page - 1; //decrement the page  
          if (current_page >= 0) { //check if it's possible page
           $('#items li').hide().slice((current_page*per_page), (current_page*per_page+per_page)).fadeIn(); //show the prev page
          }
         }
         //check if the down button will be still shown or hidden
          if (length >= (current_page+1)*per_page) $('#down').show();
          else $('#down').hide();
         //check if the up button will be still shown or hidden
          if ((current_page-1) >= 0) $('#up').show();
          else $('#up').hide();
        });
    });
    </script>

<img src="./up.jpg" id="up" class="arrow">
<img src="./down.jpg" id="down" class="arrow">
<ul id="items">
  <li>1</li>
  ....
  <li>30</li>
</ul>

$（文档）.ready（函数（）{
//隐藏所有列表项，并显示前5项
$（'#items li'）.hide（）.slice（0,5）.show（）；
//隐藏向上按钮
$（'向上'）.hide（）；
变量长度=$（'#项li'）。长度；
var当前页面=0；
每页var=5；
$（“.arrow”）。单击（函数（）{
var arrow=$（this.attr（“id”）；
如果（箭头==“向下”）{
当前页面=当前页面+1；//增加页面
如果（长度>=当前页面*每页）{//检查是否有可能翻页
$（'#items li'）.hide（）.slice（（当前页面*每页），（当前页面*每页+每页））.fadeIn（）；//显示下一页
}
} 
否则，如果（箭头==‘向上’）{
当前页面=当前页面-1；//减少页面
如果（当前页面>=0）{//请检查是否有可能打开页面
$（“#items li”）.hide（）.slice（（当前页面*每页），（当前页面*每页+每页））.fadeIn（）；//显示上一页
}
}
//检查向下按钮是否仍然显示或隐藏
如果（长度>=（当前页面+1）*每页）$（'向下'）.show（）；
else$（'#down'）.hide（）；
//检查向上按钮是否仍然显示或隐藏
如果（（当前第1页）>=0）$（“#向上”）.show（）；
else$（'#up'）.hide（）；
});
});

一,
....
三十

感谢您提供的信息，我宁愿使用简单易用的东西，而不是插件。这一直是我的问题。我试过了你的代码，但它的工作方式与我的想法不同：当你点击这5个，而不是仅仅添加5个，直到全部完成时，是否还有其他方法可以让它这样做？哦，你需要某种分页吗？你说“它显示了5个以上的项目”，所以我想它会被附加上是的，我想分页是一个更好的词…为混乱感到抱歉，我似乎无法让它工作。我不能点击下箭头。它是否意味着拥有与以前相同的html代码？很抱歉，我对使用jquery还很陌生。