JQuery скользить вниз и вверх со стрелками

Question

Я пытаюсь найти простой способ использовать jquery, чтобы получить список из 5 элементов, а затем нажать стрелку вниз, и он показывает еще 5 элементов и так далее и так далее. Если стрелки вверх и вниз исчезают, когда достигают вершины и низа, это будет плюсом. Любая помощь будет принята с благодарностью.

Answer 1

это должно работать, проверено

<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>

Answer 2

Существует множество плагинов для jquery. Это сэкономит ваше время, настроив некоторый код для вашего проекта.

http://blog.ajaxmasters.com/jquery-pagination-plugin/

http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/

http://web.enavu.com/tutorials/making-a-jquery-pagination-system/

или если вы хотите сделать это самостоятельно, это будет что-то вроде этого

<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>

PS: я не мог проверить это