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> 

PS：我無法測試它