一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

首页游戏下载软件下载专题资讯教程 php教程 asp.net教程 css教程网页制作网页特效手机开发办公数码

+ -

当前位置：一聚教程网 > 网页特效 > 状态栏类

推荐专题

最新下载

1

酸酸大冒险之驱年兽
93.96M 类型： 角色扮演
2

War Thunder
90.8MB 类型： 策略塔防
3

雪雉的小店
123.15M 类型： 模拟经营
4

阴阳师多酷账号登录版
1.95 GB 类型： 策略卡牌
5

怪物射击战场
60.06M 类型： 射击枪战
6

脑力冲关赛
52.07MB 类型： 赛车竞速
7

地城与冒险
311.06MB 类型： 动作冒险
8

地毯清洁
99.06M 类型： 休闲益智
9

改造沙龙
81.59M 类型： 模拟经营
10

皇上请答题
61.38M 类型： 休闲益智

热门教程

1

诛仙2鬼王怎么加点鬼王加点推荐
时间：2025-08-20 类型： 游戏攻略
2

诛仙2见影灵泉奇遇任务怎么做见影灵泉奇遇任务流程攻略
时间：2025-08-20 类型： 游戏攻略
3

三国天下归心诸葛亮怎么样诸葛亮技能介绍一览
时间：2025-08-20 类型： 游戏攻略
4

三国天下归心追击队怎么玩追击队玩法教学
时间：2025-08-20 类型： 游戏攻略
5

三国天下归心武将怎么获得武将获取方法
时间：2025-08-20 类型： 游戏攻略
6

星痕共鸣剧毒蜂巢怎么获取剧毒蜂巢获取攻略
时间：2025-08-20 类型： 游戏攻略
7

新三国志曹操传李儒之影怎么打李儒之影打法教学
时间：2025-08-20 类型： 游戏攻略
8

辉烬队伍怎么搭配配队攻略指南
时间：2025-08-20 类型： 游戏攻略
9

创造吧我们的星球种田玩法怎么玩种田玩法介绍一览
时间：2025-08-20 类型： 游戏攻略
10

华夏千秋怎么表白表白方法一览
时间：2025-08-20 类型： 游戏攻略

js图片上下滚动效果

时间：2022-07-02 15:14:21 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<style type="text/<a href=" http: target="_blank">css">
.wrap{padding-top:24px; background:#c00 url(http://i1.s*i**naimg.cn/ty/up/2008-08-26/U3231P6T64D51500F1091DT20080826141902.jpg) no-repeat;  }
td {
	font-size: 12px;border-right: medium none; padding-right: 0px; border-top: medium none; padding-left: 0px; padding-bottom: 0px; margin: 0px; border-left: medium none; paddding-top: 0px; border-bottom: medium none
}
.NUM1 {color:#fff;   cursor:pointer;}
.NUM2 {color: #fff;   cursor:pointer; background:url(http://d1.si**n*a.com.cn/jianyu1/NIKE/images/btn_on_bg.gif) no-repeat; }
.num{text-align:center;background:url(http://d1.si*na.*c*om.cn/jianyu1/NIKE/images/btn_bg.jpg) no-repeat; margin-left:1px; font-weight:bold; font-family:SimHei;   overflow:hidden;}
.num{*position:relative; top:-1px;}
#main a:link{color:#000; text-decoration:none;}
#main a:visited{color:#000; text-decoration:none;}
#main a:hover{color:#000; text-decoration:none;}
#main {line-}
#main .title a:link{color:#f00; text-decoration:none;}
#main .title a:visited{color:#f00; text-decoration:none;}
#main .title a:hover{color:#f00; text-decoration:none;}
</style>
<div style="z-index: 10;  overflow:hidden;">
<table cellspacing="0" cellpadding="0" width="22">
<tbody>
<tr>
<td>
<table cellspacing="0" class="num">
<tbody>
<tr>
<td width="0" style="display:none;"><img id="upbtn" style="cursor: pointer"></td>
</tr>
<tr>
<td id="led1" class="NUM2" onclick="javascript:slideTo(1);">1</td>
<td id="led2" class="NUM1" onclick="javascript:slideTo(2);">2</td>
<td id="led3" class="NUM1" onclick="javascript:slideTo(3);">3</td>
<td id="led4" class="NUM1" onclick="javascript:slideTo(4);">4</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="main" style="overflow:hidden;  position:relative; ">
	<div id="f1" style="z-index: 10; left: 0px;  position: absolute; top: 0px; ">

		
<div style=" padding:5px;  margin-left:1px; background:url(http://d1.sina.*c**om.cn/jianyu1/NIKE/images/content_bg.jpg) no-repeat;cursor:pointer;">
		<div style="float:left;  padding:3px 0 0 3px;">
		<div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"></div>
		<div></div>
		</div>
		<div style="float:right;  border:1px solid #ccc; padding:4px; background:#fff;"></div>
		</div>
		
			</div>
	<div id="f2" style="z-index: 10; left: 0px;  position: absolute; top: 85px; ">
		
<div style=" padding:5px;  margin-left:1px; background:url(http://d1.sina.*c**om.cn/jianyu1/NIKE/images/content_bg.jpg) no-repeat;cursor:pointer;">
		<div style="float:left;  padding:3px 0 0 3px;">
		<div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"></div>
		<div></div>
		</div>
		<div style="float:right;  border:1px solid #ccc; padding:4px; background:#fff;"></div>
		</div>
		
		
		
	</div>
	<div id="f3" style="z-index: 10; left: 0px;  position: absolute; top: 170px; ">
		
<div style=" padding:5px;  margin-left:1px; background:url(http://d1.sina.*c**om.cn/jianyu1/NIKE/images/content_bg.jpg) no-repeat;cursor:pointer;">
		<div style="float:left;  padding:3px 0 0 3px;">
		<div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"></div>
		<div></div>
		</div>
		<div style="float:right;  border:1px solid #ccc; padding:4px; background:#fff;"></div>
		</div>
				
	</div>
	<div id="f4" style="z-index: 10; left: 0px;  position: absolute; top: 255px; ">
		
<div style=" padding:5px;  margin-left:1px; background:url(http://d1.sina.*c**om.cn/jianyu1/NIKE/images/content_bg.jpg) no-repeat;cursor:pointer;">
		<div style="float:left;  padding:3px 0 0 3px;">
		<div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"></div>
		<div></div>
		</div>
		<div style="float:right;  border:1px solid #ccc; padding:4px; background:#fff;"></div>
		</div>
		
	</div>
</div>

<script language="javascript" type="text/javascript">
//<![CDATA[
var curFrame=1; //当前标签
var frame; //单层高度
var speed = 5; //滚动速度
var waitTime = 4000; //自动播放间隔时间
var scrollItv;
var autoItv;
var maindiv = document.getElementById("main");
autoItv = setInterval(autoSlide, waitTime);
function slideTo(id){
	curFrame = id;
	var curTop = maindiv.scrollTop;
	var tarTop = frameheight*(id-1);
	var step = curTop>tarTop?-speed:speed;
	clearInterval(autoItv);
	clearInterval(scrollItv);
	scrollItv = setInterval(function(){
		maindiv.scrollTop += step;
		if(Math.abs(maindiv.scrollTop-tarTop)<speed){
			clearInterval(scrollItv);
			maindiv.scrollTop = tarTop;
			autoItv = setInterval(autoSlide, waitTime);
		}
	},20);
	for(i=1;i<=4;i++){
		document.getElementById('led'+i).className='NUM1';
	}
	document.getElementById('led'+curFrame).className='NUM2';
}
function autoSlide(){
	if(curFrame<4){curFrame++;}else{curFrame=1;}
	slideTo(curFrame);
}
//]]>
</script>

提示：您可以先修改部分代码再运行

相关文章

热门栏目