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

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

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

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模板

共2页上一页12下一页
来源:模板无忧//所属分类:动易Cms教程/更新时间:2006-05-22
相关动易Cms教程