如何通過按鈕控制的圖片上下翻滾效果_動易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> ……（以此類推）

查看更多 動易Cms教程  動易Cms模板