jPaginate Plugin para paginar con jQuery

jPaginate es un plugin de jQuery para paginación que viene con una peculiaridad: números de página animados. El usuario puede deslizarse a través de los números de las páginas disponibles haciendo clic o simplemente flotando sobre las flechas de avanzar. Los links a la página inicial y final también están disponibles.

Para hacer la llamada al plugin es de la siguiente manera

$(elementID).paginate()

Puedes configurar las siguientes propiedades del plugin:

count: el número total de páginas
start: ¿En qué número de las páginas visibles deben comenzar la navegación?
display: ¿Cuántos números de página van a verse en la navegación?
border: Si debe haber un borde (true / false)
border_color: El color del borde
text_color: Color del texto y los números
background_color: Color de fondo
border_hover_color: Color del contorno, cuando pasa por encima el mouse.
text_hover_color: El color del texto cuando pasa por encima el mouse
background_hover_color: Color de fondo cuando pasa por encima el mouse
images: Si las flechas deben ser imágenes o no (true / false)
mouse: esta propiedad puede tener dos valores.
1. “press” con este valor cuando el usuario mantiene pulsado el ratón, los números de página seguirá deslizándose.
2. "slide" los números de página se deslice una vez con cada clic.
onChange: Es el evento que se dispara cuando se hace clic en una página. Si llamamos una función podemos pasar como argumento el número de la página se hace clic.

En seguida el código para crear la paginación.

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/style.css" rel="stylesheet" />
    <style>            
            a img{
                border:none;
                outline:none;
            }
            .content{
                margin-top:100px;
                padding:0px;
                bottom:0px;
            }            
            .demo{
            width: 580px;
            padding: 10px;
            margin: 10px auto;
            border: 1px solid #fff;
            background-color: #00AEEF;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 30px;
        }
                .demo h1 {
                    color:#CCC;
                }
        .pagedemo{
            border: 1px solid #CCC;
            width: 90%;
            margin: 2px;
            padding: 50px 10px;
            text-align: center;
            background-color: white;
            
            font-size: 50px;
        }
        </style>
    <script src="javascript/jquery-1.3.2.js"></script>
    <script src="javascript/jquery.paginate.js"></script>
</head>

        <div class="content">
            <div id="paginationdemo" class="demo">
                <h1>Demo Paginación</h1>
                <div id="p1" class="pagedemo _current" style="">Page 1</div>
                <div id="p2" class="pagedemo" style="display: none;">Page 2</div>
                <div id="p3" class="pagedemo" style="display: none;">Page 3</div>
                <div id="p4" class="pagedemo" style="display: none;">Page 4</div>
                <div id="p5" class="pagedemo" style="display: none;">Page 5</div>
                <div id="p6" class="pagedemo" style="display: none;">Page 6</div>
                <div id="p7" class="pagedemo" style="display: none;">Page 7</div>
                <div id="p8" class="pagedemo" style="display: none;">Page 8</div>
                <div id="p9" class="pagedemo" style="display: none;">Page 9</div>
                <div id="p10" class="pagedemo" style="display: none;">Page 10</div>
                <div id="demo5">
                </div>
            </div>
        </div>
    <script type="text/javascript">
        $(function () {            
            $("#demo5").paginate({
                count: 10,
                start: 1,
                display: 7,
                border: true,
                border_color: '#fff',
                text_color: '#fff',
                background_color: 'black',
                border_hover_color: '#ccc',
                text_hover_color: '#000',
                background_hover_color: '#fff',
                images: false,
                mouse: 'press',
                onChange: function (page) {
                    $('._current', '#paginationdemo').removeClass('_current').hide();
                    $('#p' + page).addClass('_current').show();
                }
            });
        });
		</script>

El ejemplo lo puedes descargar en esta liga