如何通过按钮控制的图片上下翻滚效果-动易CMS教程

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

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> ……（以此类推）