jQuery分页和淡入淡出

Question

我是全新的，不幸的是我不擅长jQuery。但我有以下问题，我会深表感谢您的帮助！

我收到了一份我想分页的项目列表。我已经能够进行分页该名单包括

<ul class="products_erweitert"> 
    <li> 
     <div class="asa2_uhrenshop_main_container"></div> 
    </li> 
    <li> 
     <div class="asa2_uhrenshop_main_container"></div> 
    </li> 
</ul> 

中使用以下脚本：

(function($){ 
    $(document).ready(function(){ 
     $(".pagination").customPaginate({ 
      itemsToPaginate : ".asa2_uhrenshop_main_container" 
     }); 
    }); 
})(jQuery); 

和

(function($){ 
    $.fn.customPaginate = function(options){ 
     var paginationContainer = this; 
     var itemsToPaginate; 
     var defaults = { 
      itemsPerPage : 6 
     }; 
     var settings = {}; 

     $.extend(settings, defaults, options); 

     var itemsPerPage = settings.itemsPerPage; 

     itemsToPaginate = $(settings.itemsToPaginate); 
     var numberOfPaginationLinks = Math.ceil((itemsToPaginate.length/itemsPerPage)); 

     $("<ul></ul>").prependTo(paginationContainer); 

     for(var index = 0; index < numberOfPaginationLinks; index++){ 
      paginationContainer.find("ul").append("<li>"+ (index+1) + "</li>"); 
     } 

     itemsToPaginate.filter(":gt(" + (itemsPerPage - 1) + ")").hide(); 

     paginationContainer.find("ul li").on('click', function(){ 
      var linkNumber = $(this).text(); 
      var itemsToHide = itemsToPaginate.filter(":lt(" + ((linkNumber-1) * itemsPerPage) + ")"); 
      $.merge(itemsToHide, itemsToPaginate.filter(":gt(" + ((linkNumber * itemsPerPage) - 1) + ")")); 
      itemsToHide.hide(); 

      var itemsToShow = itemsToPaginate.not(itemsToHide); 
      itemsToShow.show("fast"); 
     }); 
    }; 
}(jQuery)); 

但我有三个问题。

1.）假设我在该列表中有18个项目。所以这18个项目生成3页。我希望他们之间有一个平稳的过渡或淡入淡出效果。不幸的是我迄今为止没有成功......

2.）现在我在页面1,2和3的底部有三个按钮。我想要一个“Previous”和“Next”按钮，但我不知道如何将它集成到我的代码中。

3.）当我点击我的18个项目列表的第2页时，前6个项目被隐藏。不幸的是，他们的<li>集装箱仍然存在，并有余量，这似乎需要在顶部的空间。

我希望有人能帮助我。

在此先感谢！

编辑：我可以自己修复编号3）。我为上述<li>课程分配了一门课，并将其授予<li class="pagination_show">。然后我更新了第一个代码片段，并用.pagination_show替换了.asa2_uhrenshop_main_container。

编辑2：我做了一个的jsfiddle：https://jsfiddle.net/b8gmqx9p/

Answer 1

对于问题1，试试这个请，

(function($){ 

     $.fn.customPaginate = function(options) 
     { 
      var paginationContainer = this; 
      var itemsToPaginate; 


      var defaults = { 

       itemsPerPage : 3 

      }; 

      var settings = {}; 

      $.extend(settings, defaults, options); 

      var itemsPerPage = settings.itemsPerPage; 

      itemsToPaginate = $(settings.itemsToPaginate); 
      var numberOfPaginationLinks = Math.ceil((itemsToPaginate.length/itemsPerPage)); 

      $("<ul></ul>").prependTo(paginationContainer); 

      for(var index = 0; index < numberOfPaginationLinks; index++) 
      { 
       paginationContainer.find("ul").append("<li>"+ (index+1) + "</li>"); 
      } 

      itemsToPaginate.filter(":gt(" + (itemsPerPage - 1) + ")").hide(); 

      paginationContainer.find("ul li").on('click', function(){ 

       var linkNumber = $(this).text(); 

       var itemsToHide = itemsToPaginate.filter(":lt(" + ((linkNumber-1) * itemsPerPage) + ")"); 
       $.merge(itemsToHide, itemsToPaginate.filter(":gt(" + ((linkNumber * itemsPerPage) - 1) + ")")); 
       itemsToHide.hide(); 

       var itemsToShow = itemsToPaginate.not(itemsToHide); 
       itemsToShow.show(1500); 

      }); 

     } 

}(jQuery)); 

(function($){ 

    $(document).ready(function(){ 

     $(".pagination").customPaginate({ 

      itemsToPaginate : ".pagination_show" 

     }); 

    }); 

})(jQuery) 

我已经改变itemsToShow.show("fast");到itemsToShow.show(1500);

在这里，我传递时间（毫秒）作为参数而不是“快速”，您可以按照您的要求更改该时间参数。

对于问题2，我建议你去找一个jQuery分页插件。有很多，其中例如， jQuery-Paging， smart paginator（这是体面的，我们用它在我们的应用程序）

以下链接太多， http://www.thedevline.com/2015/01/best-free-jquery-pagination-plugins-for.html， http://www.designrazor.net/best-free-jquery-pagination-plugins/