juqery实现图片切换

Question

我想实现一个图片切换的效果;
页面 有两个按钮：btn01  和 btn02 ；（按钮上下分布）
有5组图片，每组3张，一组一组的显示，他们的class分别为——
第一组图片：“img01”，第二组图片：“img02”，第三组图片：“img03”  ……我想实现的效果是（最好用jquery实现）：
点击btn01一次，图片换一组显示（图片向上走），再点一次，再换一组……最后一组提示“最后一组”或点击不动；
btn02同样（图片向下走），
为了方便各位更清楚，附上样式————html
<div class="divwai">
<!--左侧切换图片-->
<div class="huan">
<div class="divbing" id="huan1">
<div class="divbingnei">
<img src="images/aa.jpg" class="01"/>
<img src="images/bb.jpg" class="02"/>
<img src="images/cc.jpg" class="03"/>
</div>
<div class="divbingnei">
<img src="images/aa.jpg" class="01" />
<img src="images/bb.jpg" class="02" />
<img src="images/cc.jpg" class="03"/>
</div>
<div class="divbingnei">
<img src="images/aa.jpg" class="01" />
<img src="images/bb.jpg" class="02"/>
<img src="images/cc.jpg" class="03"/>
</div>
</div><!--<div  style="display:none;" class="divbing id="huan2"">
<div class="divbingnei"><img src="images/aa.jpg" /></div>
<div class="divbingnei"><img src="images/aa.jpg" /></div>
<div class="divbingnei"><img src="images/aa.jpg" /></div>
</div><div  style="display:none;" class="divbing" id="huan3">
<div class="divbingnei"><img src="images/aa.jpg" /></div>
<div class="divbingnei"><img src="images/aa.jpg" /></div>
<div class="divbingnei"><img src="images/aa.jpg" /></div>
</div> --></div>
<!--左侧切换图片end-->
<div class="divbing2">
<div class="niutop">
    <div class="niukuang" id="upniu">
<span style="font-size:15px; font-weight:bold; color:#FFFFFF;">向上</span>
    </div>
</div>
<div class="niudown">
<div class="niukuang2" id="downniu">
<span style="font-size:15px; font-weight:bold; color:#FFFFFF;">向下</span>
</div>
</div>
</div>
</div>————css
*{ margin:0 auto 0 auto;}
.divwai
{
    width:998px;
height:450px;

border:1px solid #006633;
background-color:#006600;}
.divbing
{
    width:99.9%;
height:430px;
float:left;
/*margin-bottom:8px;*/
border:2px solid #FF0000;
}
.huan
{
width:84%;
height:430px;
float:left;
margin-top:8px;
/*margin-bottom:8px;*/
display:inline;
overflow:hidden;
border:2px solid #FF0000;
}
.divbing2
{
    width:15%;
height:430px;
float:right;
margin-top:8px;
border:2px solid #FF0000;
}
.divbingnei
{
    width:32%;
height:429px;
float:left;
margin-left:3.5px;
margin-right:3.5px;
border:1px solid #006600;
}
.divbingnei img
{
width:99.9%;
height:429px;
}
.niutop
{
    width:99.9%;
height:215px;
text-align:center;
vertical-align:middle;

border:none;
}
.niudown
{
width:99.9%;
height:215px;
text-align:center;
border:none;
}
.niukuang
{
width:80px;
height:70px;
margin-top:60px;
line-height:60px;
cursor:pointer;
border:1px solid #00CC00;
}
.niukuang2
{
width:80px;
height:70px;
margin-top:30px;
line-height:60px;
cursor:pointer;
border:1px solid #00CC00;
}