JQuery show 5 item

 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<div class="demo">
<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>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<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>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>
<a class="prev">prev</a> | <a class="next">next</a>
<script>
$('.demo ul li:gt(5)').hide();
$('.prev').click(function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show(1000);
    first.prev().nextAll().hide()
});

$('.next').click(function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show(1000);
    last.next().prevAll().hide();
});
</script>

//for loading image
<div id="area" class="load"></div>
<script>
 var $j = jQuery.noConflict()
$j(document).ready(function() {
var length=$j(".demos ul").children().length;
if(length < 8)
{
$j(".hellosir").hide();
}
$j('.demos ul li:gt(7)').hide();
$j('.next').click(function() {
$j('#area').addClass("load");
    var last = $j('.demos ul').children('li:visible:last');
$j(".load").html("<img src='http://www.infinite-scroll.com/loading.gif' alt='description' />");
setTimeout(function() { $j(".load").hide(); last.nextAll(':lt(8)').show(100); }, 2000);
   // last.next().prevAll().hide();
});
});
</script>