jquery轮播改进

<style type="text/css">
.div1{width:1350px}
.lbanner{float:left; width:1024px; height:768px;}
li{list-style:none}
img{border:none}
.rbanner{float:right; width:280px; height:768px;}
.shuzi{text-align:right; margin-top:-30px; margin-right:10px; font-size:26px; font-weight:bold;}

</style>

<div class="div1">
<div class="lbanner">
<img src="images/j1.jpg" width="1024" height="768" class="banner"/>
<div class="shuzi">
<a onclick="imgonclick(0)" href="javascript:void(0)">1</a>
<a onclick="imgonclick(1)" href="javascript:void(0)">2</a>
<a onclick="imgonclick(2)" href="javascript:void(0)">3</a>
<a onclick="imgonclick(3)" href="javascript:void(0)">4</a>
</div>
</div>
<div class="rbanner">
<ul>
<li><img onclick="imgonclick(0)" src="images/xj1.jpg" width="280" height="180"/></li>
<li><img onclick="imgonclick(1)" src="images/xj2.jpg" width="280" height="180"/></li>
<li><img onclick="imgonclick(2)" src="images/xj3.jpg" width="280" height="180"/></li>
<li><img onclick="imgonclick(3)" src="images/xj4.jpg" width="280" height="180"/></li>
</ul>
</div>
</div>
<script type="text/javascript">
var pian=0;
var imgarr=new Array(
"images/j1.jpg",
"images/j2.jpg",
"images/j3.jpg",
"images/j4.jpg"
);
$(".banner").attr("src",imgarr[0]);
function changeimg()
{
$(".banner").attr("src",imgarr[pian]);
if (pian==3)
{
pian=0;
}else
{
pian++;
}
}
window.setInterval(function(){changeimg();},2000);
function imgonclick(i)
{
$(".banner").attr("src",imgarr[i]);
}
</script>