如何通过按钮控制的图片上下翻滚效果

　　最近感觉页面中动的东西太多，显得太杂太乱，于是想把原来向左连续滚动的图片栏改为单击后向上或向下翻滚。如图：

http://www.jzxx.net/

　　代码如下，其中红色的部分是实现自动滚动功能（演示地址：http://www.jzxx.net/bb.htm）的，不想要的朋友可以去掉，我就是其中之一。（经测试，可以实现3组甚至更多组图片的滚动）

<ul onmouseover="clearInterval(interval01);" onmouseout="iniautoslide();">
<li>
<div id="mainpic">
<div id="f1"><!--{$GetPicPhoto(3,28,true,0,5,false,false,0,1,1,111,71,30,0,false,10)}--></div>
<div id="f2"><!--{$GetPicPhoto(3,22,true,0,5,false,false,0,1,1,111,71,30,0,false,10)}--></div>
</div>
</li>
<li id="piccon">
<div id="upbtn" onclick="slideup();" style="display: none;"></div>
<div class="NUM2" id="led1">1</div>
<div class="NUM1" id="led2">2</div>
<div id="downbtn" onclick="slidedown();"></div>
</li>
</ul>
<style type="text/css">
ul {
clear: both;
}
li {
float: left;
list-style-type: none;
}
#mainpic {
overflow: hidden;
width:750px;
height:110px;
position:relative;
}
#f1 {
position:absolute;
width:750px;
height:110px;
z-index:10;
left:0px;
top: 0px;
}
#f2 {
position:absolute;
width:750px;
height:110px;
z-index:10;
left:0px;
top: 110px;
display:none;
}
#upbtn {
background: url(/images/tec_scr_lp_004.gif) no-repeat;
width: 24px;
height: 29px;
margin-bottom: 2px;
margin-left: 1px;
cursor: hand;
}
#downbtn {
background: url(/images/tec_scr_lp_005.gif) no-repeat;
margin-left: 1px;
width: 24px;
height: 30px;
cursor:hand;
}
#led1 {
height: 19px;
margin-bottom: 2px;
}
#led2 {
height: 19px;
margin-bottom: 3px;
}
#piccon {
margin-top: 14px;
}
.NUM1{
background: url(/images/tec_scr_lp_007.gif) no-repeat left;
color: #006;
padding-left:10px;
line-height: 19px;
}
.NUM2{
background: url(/images/tec_scr_lp_006.gif) no-repeat left;
color:#fff;
padding-left:10px;
line-height: 19px;
}
</style>
<script type="text/javascript">
var currentF=1;
var frameheight = 110;
var scrolling=0;
var speed = 8;
var total=2; //增加一个总组数的变量，要更多组图片实现滚动的朋友可修改该值
//并且在上面相应代码后面添加
//<div id="f3"><!--{$GetPicPhoto(3,28,true,0,5,false,false,0,1,1,111,71,30,0,false,10)}--></div> ……（以此类推）