初学jquery向各位请教

我想实现一个图片切换的效果;
页面有两个按钮：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="img01"/>
<img src="images/bb.jpg" class="img02"/>
<img src="images/cc.jpg" class="img03"/>
<img src="images/cc.jpg" class="img04"/>
<img src="images/cc.jpg" class="img05"/></div>
<div class="divbingnei">
<img src="images/aa.jpg" class="img01"/>
<img src="images/bb.jpg" class="img02"/>
<img src="images/cc.jpg" class="img03"/>
<img src="images/cc.jpg" class="img04"/>
<img src="images/cc.jpg" class="img05"/>
</div>
<div class="divbingnei">
<img src="images/aa.jpg" class="img01"/>
<img src="images/bb.jpg" class="img02"/>
<img src="images/cc.jpg" class="img03"/>
<img src="images/cc.jpg" class="img04"/>
<img src="images/cc.jpg" class="img05"/>
</div>
</div></div>

<div class="divbing2">
<div class="niutop">
<div class="niukuang" id="btn01">
<span style="font-size:15px; font-weight:bold; color:#FFFFFF;">向上</span>
</div>
</div>
<div class="niudown">
<div class="niukuang2" id="btn02">
<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;
}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

JQuery 相册
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>无标题页</title>
   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#up").click(function(){
                star();
            })
            $("#down").click(function(){
                slideDown();
            })
        })
        var tid;
        var star = function(){
            tid = setInterval(slideUp,10);
        }
        function slideUp(){
            var $ul = $("#slide");
            var $li = $("#slide li");
            $ul.scrollTop($ul.scrollTop()+5);
            if($ul.scrollTop()%250==0){
                clearInterval(tid);
                $ul.append("<li>"+$li.eq(0).html()+"</li>");
                $li.eq(0).remove();
                $ul.scrollTop(0);
            }
        }
        function slideDown(){
            var $ul = $("#slide");
            var $li = $("#slide li");
            var $lilength = $li.length;
            $ul.prepend("<li>"+$li.eq($lilength-1).html()+"</li>");
            $lilength = $("#slide li").length;
            $li.eq($lilength-1).remove();
            $ul.scrollTop(250);
            tid = setInterval(function(){
                $ul.scrollTop($ul.scrollTop()-5);
                if($ul.scrollTop()%250==0){
                    clearInterval(tid);
                }
            },10)
        }
    </script>
    <style type="text/css">
        ul{list-style:none;height:250px;overflow:hidden;}
        li{float:left}
    </style>
</head>
<body>
<form runat="server">
<a id="up">向上</a>
<ul id="slide">
    <li>
    <img src="images/p006.jpg" />
    <img src="images/p007.jpg" />
    <img src="images/p009.jpg" />
    <img src="images/p010.jpg" />
    <img src="images/p012.jpg" />
    </li>
    <li>
    <img src="images/p012.jpg" />
    <img src="images/p010.jpg" />
    <img src="images/p009.jpg" />
    <img src="images/p007.jpg" />
    <img src="images/p006.jpg" />
    </li>
</ul>
<a id="down">向下</a>
</form>
</body>
</html>
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript">
   $(document).ready(function () { var Curr=1;
var prev=Curr-1;
   //点击上一张时
$("#btn01").click(function(){
$("img[@src=images/"+Curr+".gif]").css("display","block");
$("img[@src=images/"+prev+".gif]").css("display","none");
Curr++;
prev++;
if (Curr>=6)
{
Curr=1;
prev=5;
}
if (prev>=6) {
prev=1;
}});
//点击下一张
$("#btn02").click(function () {
$("img[@src=images/"+prev+".gif]").css("display","none");
$("img[@src=images/"+Curr+".gif]").css("display","block");
Curr--;
prev--;
});
      });
   </script>
三组可以一起翻
但有个限制就是每组的图片必须一致，这个给写死了，我也是新手