jQuery carosuel分頁？

Question

嗨，我正在爲視頻庫創建jquery carosuel。我需要爲此創建分頁。 我已經創建了這個，但這不是genric腳本的分頁我已經硬編碼腳本中的分頁對象。我想讓它變得生氣，以便我可以在同一頁面上多次使用。甚至無法訪問carosuel的目標對象。

對於如

共有相關產品爲12 項目滾動： - 3在時間 分頁建議立即進行刪除是 - 1，2,3,4（4×3 = 12）

如果有人能幫助我在這。提前 感謝

來源 http://sorgalla.com/jcarousel/

這裏是代碼

Script for init jquery carosuel 
      slidingCarosuel:function(getElements,paginationNum){ 
       var myCarousel=jQuery(getElements); 
       if (myCarousel) { 
        jQuery(myCarousel).jcarousel({ 
         scroll: paginationNum, 
         initCallback:clasohlson.carosuelPagination 
        }); 
       } 
      } 

這個腳本創建分頁

carosuelPagination:function(carousel) { 
        _scrolls=carousel.options.scroll; 
        carousel.options.scroll = jQuery.jcarousel.intval(_scrolls); 
        var noLi = carousel.options.size; 
        var requiredLi = Math.ceil(noLi/_scrolls); 
        for (var i = 0; i < requiredLi; i++) { 
         var count = i + 1; 
         var liSrting = "<li>" + count + "</li>"; 
         $(".hmPagination").append(liSrting); 
        } 
        if (noLi <= _scrolls) { 
         $(".hmPagination").hide(); 
         $(".jcarousel-prev").hide(); 
         $(".jcarousel-next").hide(); 
        } 
        else { 
         //$(".hmPagination").show().text(""); 
         $(".jcarousel-prev").show(); 
         $(".jcarousel-next").show(); 
        } 
        $(".hmPagination").children(":first").addClass("selected"); 
        $(".jcarousel-next").click(function() { 
         $(".hmPagination").find("li.selected").next().addClass("selected"); 
         $(".hmPagination").find("li.selected:last").prev().removeClass("selected"); 
        }) 
        $(".jcarousel-prev").click(function() { 
         $(".hmPagination").find("li.selected:last").prev().addClass("selected"); 
         $(".hmPagination li.selected").next().removeClass("selected") 
        }) 
        $('.hmPagination li').each(function() { 
         $(this).bind("click", function() { 
          $('.hmPagination li').removeClass("selected"); 
          $(this).addClass("selected"); 
          var noClick = parseInt($(this).text()); 
          var remain = noLi % 1; 
          if ($(this).text() == "1") { 
           carousel.scroll(jQuery.jcarousel.intval(1)) 
          } 
          if (remain == 0) { 
           var ulLi = $("ul.pagination li").length 
           var scrollNo = ((noClick - 1) * 1) + 1 
           carousel.scroll(jQuery.jcarousel.intval(scrollNo)) 
          } else { 
           var scrollNo = ((noClick - 1) * 1) + 1 
           carousel.scroll(jQuery.jcarousel.intval(scrollNo)) 
          } 
          //carousel.scroll(jQuery.jcarousel.intval(firstItem)); 
          // return false; 
         }) 
        }); 
      } 

這裏，就是HTML

<ul class="carosuelList"> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                 </ul> 
                 <ul class="hmPagination"><li></li></ul> 

Answer 1

這裏是腳本製作分頁

carosuelPagination:function(carousel) { 
         tempVar=carousel.list[0]; 
         idx=jQuery(tempVar).attr("id"); 
         _scrolls=carousel.options.scroll; 
         carousel.options.scroll = jQuery.jcarousel.intval(_scrolls); 
         pagination='<ul class="pagination"></ul>'; 
         var noLi = carousel.options.size; 
         jQuery("#"+idx).parents(".smallCarosuelbox").append(pagination); 
         p=jQuery("#"+idx).parents(".smallCarosuelbox").find(".pagination"); 
         var requiredLi = Math.ceil(noLi/_scrolls); 
         for (var i = 0; i < requiredLi; i++) { 
          var count = i + 1; 
          var liSrting = "<li>" + count + "</li>"; 
          p.append(liSrting+""); 
         } 
         if (noLi <= _scrolls) { 
          p.hide(); 
          $(".jcarousel-prev,.jcarousel-next").hide(); 
         } 
         else { 
          $(".jcarousel-prev,.jcarousel-next").show(); 
         } 
         p.find("li:first").addClass("selected"); 
         p.find('li').each(function() { 
          $(this).bind("click", function(e) { 
           jQuery(e.target).parent().find('li').removeClass("selected"); 
           $(this).addClass("selected"); 
           var noClick = parseInt($(this).text()); 
           var remain = noLi % _scrolls; 
           if ($(this).text() == "1") { 
            carousel.scroll(jQuery.jcarousel.intval(1)) 
           } 
           if (remain == 0) { 
            var ulLi = $("ul.pagination li").length 
            var scrollNo = ((noClick - 1) * _scrolls) + 1 
            carousel.scroll(jQuery.jcarousel.intval(scrollNo)) 
           } else { 
            var scrollNo = ((noClick - 1) * _scrolls) + 1 
            carousel.scroll(jQuery.jcarousel.intval(scrollNo)) 
           } 
          }) 
         }); 
       },