jquery html листалка

<div class="best">
<p>
<a  title="1">
<img src="/" alt="1"/>
</a>
<a  title="2">
<img src="/" alt="2"/>
</a>
<a  title="3">
<img src="/"  alt="3"/>
</a>
<a  title="4" >
<img src="/"  alt="4"/>
</a>
<a title="5" >
<img src="/"  alt="5"/>
</a>
<a  title="6" >
<img src="/"  alt="6"/>
</a>
<a  title="7" >
<img src="/"  alt="7"/>
</a>
<a  title="8" >
<img src="/"  alt="8"/>
</a>
<a  title="9" >
<img src="/"  alt="9"/>
</a>
<a  title="10" >
<img src="/"  alt="10"/>
</a>
<a  title="11" >
<img src="/"  alt="11"/>
</a>
<a  title="12">
<img src="/"  alt="12"/>
</a>
</p>

<p class="bEx">
<a  title="111">
<img src="/" alt="1111111"/>
</a>
<a  title="2">
<img src="/" alt="2"/>
</a>
<a  title="3">
<img src="/"  alt="3"/>
</a>
<a  title="4" >
<img src="/"  alt="4"/>
</a>
<a title="5" >
<img src="/"  alt="5"/>
</a>
<a  title="6" >
<img src="/"  alt="6"/>
</a>
<a  title="7" >
<img src="/"  alt="7"/>
</a>
<a  title="8" >
<img src="/"  alt="8"/>
</a>
<a  title="9" >
<img src="/"  alt="9"/>
</a>
<a  title="10" >
<img src="/"  alt="10"/>
</a>
<a  title="11" >
<img src="/"  alt="11"/>
</a>
<a  title="12">
<img src="/"  alt="12"/>
</a>
</p>

</div>


</div>

<script>
$(".best p").append("<a>&raquo;</a>");
$(".best p").prepend("<a>&laquo;</a>");
var bIn=0;
var bCount=$('.best p').size()-1;
$(".best p a:last-child").click(function () {
var pEx=$('.best p:eq('+bIn+')');
if(bIn<bCount)bIn++; else bIn=0;
pEx.addClass('bEx');
$('.best p:eq('+bIn+')').removeClass('bEx');
});
$(".best a:first-child").click(function () {
var pEx=$('.best p:eq('+bIn+')');
if(bIn<=0)bIn=bCount; else bIn--;
pEx.addClass('bEx');
$('.best p:eq('+bIn+')').removeClass('bEx');
});
</script>
<style>
.bEx,.bEx *{
display:none !important;
width:0 !important;
}
.best{
display:table;
width:100%;
}
.best span{
color: #3f3f3f;
font-size: 11px;
ora
}
.best a:hover span{
display:inline-block;
}
.best p{
text-align:center;
padding:0;
margin:0;
display:table-row;
}
.best a{
display:table-cell;
width:8.083%;
}
.best a:hover{
border:1px solid #E9E9E9;
}
.best a:first-child,.best a:last-child{
width:1.5%;
vertical-align:middle;
background: linear-gradient(to bottom, #FCFCFC 0px, #F1F1F1 100%) transparent;
border: 1px solid #E9E9E9;
color: #656565;
text-shadow: 0px 1px 0px #FFFFFF;
}
.best a:first-child:hover,.best a:last-child:hover{
background: none;
}
.best img{
width:100%;
}
</style>