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

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

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

+ -

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

推荐专题

最新下载

1

击败与完善手游
57.96MB 类型： 动作冒险
2

消防战士安装
24.22MB 类型： 休闲益智
3

敢问猫在何方下载安装
79.88MB 类型： 休闲益智
4

雨中东京站安装
0KB 类型： 模拟经营
5

一起来吃瓜安卓下载
27.6M 类型： 休闲益智
6

梦回千秋安装
383.9MB 类型： 策略塔防
7

死亡空间手机版
469MB 类型： 射击枪战
8

城市开放冒险正式版
24.25MB 类型： 策略卡牌
9

街头竞速大师下载最新版
50.45MB 类型： 赛车竞速
10

多种族与汽车比赛安卓下载
925MB 类型： 赛车竞速

热门教程

1

万国觉醒拜巴尔怎么养
时间：2024-04-24 类型： 游戏攻略
2

斗罗大陆魂师对决怎么把星数重置
时间：2024-04-24 类型： 游戏攻略
3

光遇办公室怎么进
时间：2024-04-24 类型： 游戏攻略
4

乱斗西游2如何免费获得伏羲
时间：2024-04-24 类型： 游戏攻略
5

剑与远征格温妮丝赏金试炼攻略大全
时间：2024-04-24 类型： 游戏攻略
6

时空猎人装备融合满了怎么开启特效
时间：2024-04-23 类型： 游戏攻略
7

率土之滨兵种加成怎么提高
时间：2024-04-23 类型： 游戏攻略
8

古墓丽影9技能点怎么获得
时间：2024-04-23 类型： 游戏攻略
9

万国觉醒怎么快速随机迁城
时间：2024-04-23 类型： 游戏攻略
10

影之刃3强攻试练怎么刷
时间：2024-04-23 类型： 游戏攻略

js图片上下滚动效果

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

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

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
.wrap{padding-top:24px; background:#c00 url(http://i1.sinaimg.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.sina.com.cn/jianyu1/NIKE/images/btn_on_bg.gif) no-repeat; }
.num{text-align:center;background:url(http://d1.sina.com.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.com.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"><a href="http://sports.sina.com.cn/nike/lbj6/index.html" target="_blank">詹姆斯：全力以赴</a></div>
		<div><a href="http://sports.sina.com.cn/nike/lbj6/index.html" target="_blank">竞猜赛事结果，上传LBJ精彩动作，评论比赛表现，都有机会赢取LBJ运动装备大奖...</a></div>
		</div>
		<div style="float:right;  border:1px solid #ccc; padding:4px; background:#fff;"><a href="http://sports.sina.com.cn/nike/lbj6/index.html" target="_blank"><img     src="https://img.111cn.net/uploads/20220923/img_632c8f1fb41a131.jpg" alt="詹姆斯"></a></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.com.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"><a href="http://blog.sina.com.cn/s/blog_570e87da0100bqtt.html?tj=1" target="_blank">LBJ6详尽测评</a></div>
		<div><a href="http://blog.sina.com.cn/s/blog_570e87da0100bqtt.html?tj=1" target="_blank">在整个LBJ签名系列里,仅次于LBJ2的签名球鞋.他在舒适性上完全可以同LBJ2相媲美.比起2代,只有那么一点点的不足...</a></div>
		</div>
		<div style="float:right;  border:1px solid #ccc; padding:4px; background:#fff;"><a href="http://blog.sina.com.cn/s/blog_570e87da0100bqtt.html?tj=1" target="_blank"><img     src="https://img.111cn.net/uploads/20220923/img_632c8f1fdaac132.jpg" alt="LBJ6"></a></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.com.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"><a href="http://sports.sina.com.cn/nike/706/index.html" target="_blank">免费篮球馆</a></div>
		<div><a href="http://sports.sina.com.cn/nike/706/index.html" target="_blank">京城一流室内篮球馆免费开放，新浪篮球体验周火热启动...</a></div>
		</div>
		<div style="float:right;  border:1px solid #ccc; padding:4px; background:#fff;"><a href="http://sports.sina.com.cn/nike/706/index.html" target="_blank"><img     src="https://img.111cn.net/uploads/20220923/img_632c8f200f8e433.jpg" alt="706"></a></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.com.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"><a href="http://bbs.service.sina.com.cn/treeforum/App/view.php?bbsid=27&subid=7&tbid=77&fid=490262" target="_blank">詹姆斯：有奖征文</a></div>
		<div><a href="http://bbs.service.sina.com.cn/treeforum/App/view.php?bbsid=27&subid=7&tbid=77&fid=490262" target="_blank">NBA名人堂连续8周关注勒布朗詹姆斯跟踪骑士队比赛，竞猜评论赢取运动装备...</a></div>
		</div>
		<div style="float:right;  border:1px solid #ccc; padding:4px; background:#fff;"><a href="http://bbs.service.sina.com.cn/treeforum/App/view.php?bbsid=27&subid=7&tbid=77&fid=490262" target="_blank"><img     src="https://img.111cn.net/uploads/20220923/img_632c8f2036d0634.jpg" alt="詹姆斯"></a></div>
		</div>
		
	</div>
</div>
</td>
</tr>
</tbody>
</table>
<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>

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

相关文章

热门栏目