Problem showing part of navigation menu using jquery

I have horizontal navigation menu with lot of list items. I want to display only five items and hide the rest. Then add left and right arrow buttons at the both ends of the navigation menu. On click it shows the next 5 list items.

<ul>
   <li><a href="#">List item 1</a></li> 
   <li><a href="#">List item 2</a></li>
   <li><a href="#">List item 3</a></li>
   <li><a href="#">List item 4</a></li>
   <li><a href="#">List item 5</a></li>
   <li class="hide"><a href="#">List item 6</a></li>
   <li class="hide"><a href="#">List item 7</a></li>
   <li class="hide"><a href="#">List item 8</a></li>
   <li class="hide"><a href="#">List item 9</a></li>
   <li class="hide"><a href="#">List 开发者_如何学JAVAitem 10</a></li>
</ul>

I appreciate any help.

---

try it:

HTML code

<ul id="list">
   <li><a href="#">List item 1</a></li> 
   <li><a href="#">List item 2</a></li>
   <li><a href="#">List item 3</a></li>
   <li><a href="#">List item 4</a></li>
   <li><a href="#">List item 5</a></li>
   <li><a href="#">List item 6</a></li>
   <li><a href="#">List item 7</a></li>
   <li><a href="#">List item 8</a></li>
   <li><a href="#">List item 9</a></li>
   <li><a href="#">List item 10</a></li>
</ul>
<input type="button" name="prev" value=" prev " />
<input type="button" name="next" value=" next " />

JavaScript Code

var list = $('#list li');
reset();

function reset () {
    step = 5; // number of list items to show (by removing hidden class)
    current = 0;

    for (i=0; i< list.length; i++) {
        if ( i >= step ) { $(list[i]).addClass('hidden'); }
         else $(list[i]).removeClass('hidden');
    }
}

$('input[name="next"]').live('click', function () {

    current += step;
    threshold = current + step;
    if (threshold > list.length-1+step) { current -= step; threshold = list.length; }
    for (i=0; i < list.length; i++) {
        if ( (i >= current) && (i < threshold ) ) { $(list[i]).removeClass('hidden'); }
         else $(list[i]).addClass('hidden');
    }
});
$('input[name="prev"]').live('click', function () {
    current -= step;
    threshold = current + step;
    if (current < 0) { reset();  threshold = current + step; 
    }
    for (i=0; i < list.length; i++) {
        if ( (i >= current) && (i < threshold ) ) { $(list[i]).removeClass('hidden'); }
         else $(list[i]).addClass('hidden');
    } 
});