Question

我正在为视频库创建jquery轮播。我需要为此创建一个分页。我已经创建了这个，但这不是分页的genric脚本我已经在脚本中硬编码了Pagination对象。我想让它成为genric，以便我可以在同一页面上多次使用它。甚至无法访问旋转木马的目标对象。

对于E.g

总项目是12 滚动项目： - 3时间分页应为-1,2,3,4（4 x 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))
                                }
                            })
                        });
                },

jQuery轮播分页？

1 个答案: