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

Question

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

Answer 1

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

<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

Попробуйте что-нибудь подобное. Не слишком причудливый, но он выполняет свою работу.

 var topIndex = 0; 
     var step  = 5; 
     var itemsCount = $('li').size(); 
     showItemsStartingFrom(topIndex); 

     $('a.next').click(function() 
     { 
      showItemsStartingFrom(topIndex); 
      return false; 
     }) 

     function showItemsStartingFrom(index) 
     { 
      $('li').hide(0) 
        .slice(index, index+step) 
        .show(); 
      topIndex += step; 
      if (topIndex >= itemsCount) 
       $('a.next').fadeOut(300); 
     } 

Answer 3

Существует множество плагинов для разбивки на страницы для 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> 

пс: Я не мог проверить его