想要使用Easy Paginate jQuery插件在同一页面上创建多个分页

Question

here is the plugin which I am using
我在我的水平尝试了很多东西，但没有得到压轴欲望的结果，在这里我想创建两个彼此分开的实例，他们的行为也在他们的级别上不同
我试过的，首先根据plugin html文件应用或链接所有必要的文件.HTML结构

    <div id="easyPaginate">
        <img src="img/demo/surf1.jpg" />
        <img src="img/demo/surf2.jpg" />
        <img src="img/demo/surf3.jpg" />
        <img src="img/demo/surf4.jpg" />
        <img src="img/demo/surf5.jpg" />
        <img src="img/demo/surf6.jpg" />
        <img src="img/demo/surf7.jpg" />
        <img src="img/demo/surf8.jpg" />
        <img src="img/demo/surf9.jpg" />
    </div>

<div id="easyPaginate1">
        <img src="img/demo/surf11.jpg" />
        <img src="img/demo/surf12.jpg" />
        <img src="img/demo/surf13.jpg" />
        <img src="img/demo/surf14.jpg" />
        <img src="img/demo/surf15.jpg" />
        <img src="img/demo/surf16.jpg" />
        <img src="img/demo/surf17.jpg" />
        <img src="img/demo/surf18.jpg" />
        <img src="img/demo/surf19.jpg" />
    </div>

来自Script.js文件的Java脚本函数意味着我可以在脚本标签的html页面中添加的简单函数

$(function() {  
    $('#easyPaginate').easyPaginate1({
        paginateElement: 'a',
        pagination: true,
        loader: true,
        elementsPerPage: 3,
        randomizer: 0.7
    }); 
});
$(function () {
    $('#easyPaginate1').easyPaginate({
        paginateElement: 'a',
        pagination: true,
        loader: true,
        elementsPerPage: 4,
        randomizer: 0.7
        //effect: 'slide'
    });
});

这是外部java脚本文件，其中主要功能是

(function ($) {
    $.fn.easyPaginate = function (options) {
        var defaults = {                
            hashPage: 'page',                
            effect: 'default',                
            prevButton: true,
            prevButtonText: 'Prevous',
            nextButton: true,
            nextButtonText: 'Next'
        }

        return this.each(function (instance) {

            var plugin = Object;
            plugin.el = $(this);
            plugin.el.addClass('easyPaginateList');

            plugin.settings = {
                pages: 0,
                objElements: Object,
                currentPage: 1
            }

            var getNbOfPages = function () {
                return Math.ceil(plugin.settings.objElements.length / plugin.settings.elementsPerPage);
            };

            var displayNav = function () {
                htmlNav = '<div class="easyPaginateNav arrow-box">';


                //for (i = 1; i <= plugin.settings.pages; i++) {
                //    htmlNav += '<a href="#' + plugin.settings.hashPage + ':' + i + '" title="Page ' + i + '" rel="' + i + '" class="page">' + i + '</a>';
                //};

                if (plugin.settings.prevButton) {

                    htmlNav += '<a href="" title="Previous" rel="" class="prev">' + plugin.settings.prevButtonText + '</a>';

                    //<a href="#" onMouseOver="MM_swapImage('arrow1left','','images/list-docs-arrow-right-on.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/list-docs-arrow-right-off.png" border="0" id="arrow1left"></a>
                    //htmlNav += '<a href="" title="Previous" rel="" class="prev" ' + onMouseOver + '="MM_swapImage(' + arrow1left + ',' + ',' + images / list - docs - arrow - right - on.png + ',1)" ' + onMouseOut + '=' + "MM_swapImgRestore()" > ' ' + plugin.settings.prevButtonText + '</a>';
                }

                if (plugin.settings.nextButton) {
                    htmlNav += '<a href="" title="Next" rel="" class="next">' + plugin.settings.nextButtonText + '</a>';
                }


                htmlNav += '</div>';
                plugin.nav = $(htmlNav);
                //plugin.nav.css({
                //    'width': plugin.el.width()
                //});
                plugin.el.after(plugin.nav);

                $('.easyPaginateNav a.page, .easyPaginateNav a.first, .easyPaginateNav a.last', plugin).on('click', function (e) {
                    e.preventDefault();
                    displayPage($(this).attr('rel'));
                });

                $('.easyPaginateNav a.prev', plugin).on('click', function (e) {
                    e.preventDefault();
                    page = plugin.settings.currentPage > 1 ? parseInt(plugin.settings.currentPage) - 1 : 1;
                    displayPage(page);
                });

                $('.easyPaginateNav a.next', plugin).on('click', function (e) {
                    e.preventDefault();
                    page = plugin.settings.currentPage < plugin.settings.pages ? parseInt(plugin.settings.currentPage) + 1 : plugin.settings.pages;
                    displayPage(page);
                });
            };

            var displayPage = function (page, forceEffect) {
                if (plugin.settings.currentPage != page) {
                    plugin.settings.currentPage = parseInt(page);
                    offsetStart = (page - 1) * plugin.settings.elementsPerPage;
                    offsetEnd = page * plugin.settings.elementsPerPage;
                    if (typeof (forceEffect) != 'undefined') {
                        eval("transition_" + forceEffect + "(" + offsetStart + ", " + offsetEnd + ")");
                    } else {
                        eval("transition_" + plugin.settings.effect + "(" + offsetStart + ", " + offsetEnd + ")");
                    }

                    plugin.nav.find('.current').removeClass('current');
                    plugin.nav.find('a.page:eq(' + (page - 1) + ')').addClass('current');

                    switch (plugin.settings.currentPage) {
                        case 1:
                            $('.easyPaginateNav a', plugin).removeClass('disabled');
                            $('.easyPaginateNav a.first, .easyPaginateNav a.prev', plugin).addClass('disabled');
                            break;
                        case plugin.settings.pages:
                            $('.easyPaginateNav a', plugin).removeClass('disabled');
                            $('.easyPaginateNav a.last, .easyPaginateNav a.next', plugin).addClass('disabled');
                            break;
                        default:
                            $('.easyPaginateNav a', plugin).removeClass('disabled');
                            break;
                    }
                }
            };

            var transition_default = function (offsetStart, offsetEnd) {
                plugin.currentElements.hide();
                plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
                plugin.el.html(plugin.currentElements);
                plugin.currentElements.show();
            };

            var transition_fade = function (offsetStart, offsetEnd) {
                plugin.currentElements.fadeOut();
                plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
                plugin.el.html(plugin.currentElements);
                plugin.currentElements.fadeIn();
            };

            var transition_slide = function (offsetStart, offsetEnd) {
                plugin.currentElements.animate({
                    'margin-left': plugin.settings.slideOffset * -1,
                    'opacity': 0
                }, function () {
                    $(this).remove();
                });

                plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
                plugin.currentElements.css({
                    'margin-left': plugin.settings.slideOffset,
                    'display': 'block',
                    'opacity': 0,
                    'min-width': plugin.el.width() / 2
                });
                plugin.el.html(plugin.currentElements);
                plugin.currentElements.animate({
                    'margin-left': 0,
                    'opacity': 1
                });
            };

            var transition_climb = function (offsetStart, offsetEnd) {
                plugin.currentElements.each(function (i) {
                    var $objThis = $(this);
                    setTimeout(function () {
                        $objThis.animate({
                            'margin-left': plugin.settings.slideOffset * -1,
                            'opacity': 0
                        }, function () {
                            $(this).remove();
                        });
                    }, i * 200);
                });

                plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
                plugin.currentElements.css({
                    'margin-left': plugin.settings.slideOffset,
                    'display': 'block',
                    'opacity': 0,
                    'min-width': plugin.el.width() / 2
                });
                plugin.el.html(plugin.currentElements);
                plugin.currentElements.each(function (i) {
                    var $objThis = $(this);
                    setTimeout(function () {
                        $objThis.animate({
                            'margin-left': 0,
                            'opacity': 1
                        });
                    }, i * 200);
                });
            };

            plugin.settings = $.extend({}, defaults, options);

            plugin.currentElements = $([]);
            plugin.settings.objElements = plugin.el.find(plugin.settings.paginateElement);
            plugin.settings.pages = getNbOfPages();
            if (plugin.settings.pages > 1) {
                plugin.el.html();

                // Here we go
                displayNav();

                page = 1;
                if (document.location.hash.indexOf('#' + plugin.settings.hashPage + ':') != -1) {
                    page = parseInt(document.location.hash.replace('#' + plugin.settings.hashPage + ':', ''));
                    if (page.length <= 0 || page < 1 || page > plugin.settings.pages) {
                        page = 1;
                    }
                }

                displayPage(page, 'default');
            }
        });
    };

})
(jQuery);

这里我得到的是，来自一个实例的箭头或导航会影响div的两种方式，即单击下一个或来自任何单个实例的prev，从两个实例中滑动元素，所以我该如何解决这个问题问题？？