Middle selected list
<p>help me its very urgent i am new to jquery how to achieve below requirement </p>

<p>i have a list ul li (unorderd list)</p>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

<p>Display only 5 item by default selection in middle always selected item(3).</p>

<p>when click on down arrow 1 will move up and 2,3,4,5,6 should display here 4 is selected item.in second down arrow click 2 will move up and 3,4,5,6,7 should display and here 5 is selected item.same for up arrow also.</p>

<p>when up 2,3,4,5,6 should display here  item(4).</p>

<p>please help me to achieve this in using javascript or jquery</p>
