网站技术 | 万年历 | IT术语解释 | 在线翻译 | 中国邮政 | Alexa排名查询 | PR 值查询 | 在线代理 | IP地址查询 | 火车票查询 | 颜色选择器 | 常用网页小图标 | 网址导航 |
推荐视频黑客视频 | 安装Windows Vista视频 | 安装Windows XP系统视频教程 | 设置BIOS视频 | 硬盘分区视频 | 经典FLASH动画视频教程 | Photoshop视频教程
推荐工具IP地址查询 手机号查询 身份证查询 | 城市地图 | 火车票查询 | 健康指数 | 中秋祝福 | 许愿树 | 果果爱墙 | QQ爱墙 | 网页素材 | FLASH小游戏 |
  大屏幕图片上下滚动代码 可任意增加图片 双击自动滚屏  【字体:
大屏幕图片上下滚动代码 可任意增加图片
电脑知识网为您报时:今天是
分享到:
 
 
 
 
 
 
 
大屏幕图片上下滚动代码 可任意增加图片 图例:

代码1:(将下面代码放置要显示效果的网页)

<DIV id=banner class=autocenter>

<table width="970" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><DIV class="flashbox" align="center">
<DIV id="SwitchBigPic">
<A href="左侧
第一张大图链接地址">
<IMG id=img1 class="pic" src="左侧第一张大图地址" >
<A href="
http://www.chinastu.org/product/2011/0523/26.html">
<IMG id=img2 class="pic" style="DISPLAY: none;" src="/templets/blue/images/banner_2.jpg" >
<A href="
http://www.chinastu.org/product/2011/0523/25.html">
<IMG id=img3 class="pic" style="DISPLAY: none;" src="/templets/blue/images/banner_3.jpg" >
<A href="
http://www.chinastu.org/product/2011/0609/33.html">
<IMG id=img4 class="pic" style="DISPLAY: none;" src="
/wangzhanchenxu/UploadFiles_6703/201106/20110612100211804.jpg" >


<UL id="SwitchNav">
<LI onmousemove="mouseimg(1)" onmouseout="outmouse()"><A href="#">矿山资源管理</LI>
<LI onmousemove="mouseimg(2)" onmouseout="outmouse()"><A href="#">矿山培训管理</LI>
<LI onmousemove="mouseimg(3)" onmouseout="outmouse()"><A href="#">矿山安全管理</LI>
<LI onmousemove="mouseimg(4)" onmouseout="outmouse()"><A href="#">遥感数据服务</LI>
</ul>
</div></td>
</tr>
</table>
<script src="代码2链接地址" type="text/javascript"></script>
<script>var MaxImg = 4; setTimeout("showimg(1)",1000);</script>

代码2(放在服务器中,由代码1链接)

var oldobj=false;
var imgobj=false;
var nownum=0;
var t=false;
function showimg(num){
if(t){
clearTimeout(t);
}
if(parseInt(num)==1){
if(!imgobj){
document.images['img1'].style.display = "";
document.getElementById("SwitchNav").getElementsByTagName("li")[0].className='selected';
oldobj=document.getElementById("SwitchNav").getElementsByTagName("li")[0];
imgobj=document.images['img1'];
}
else{
document.images['img1'].style.display = "";
document.getElementById("SwitchNav").getElementsByTagName("li")[0].className='selected'
imgobj.style.display = "none";
oldobj.className='';
oldobj=document.getElementById("SwitchNav").getElementsByTagName("li")[0];
imgobj=document.images['img1'];
}
num++;
t=setTimeout("showimg("+num+")",3000);
return;
}
document.images['img'+num].style.display = "";
document.getElementById("SwitchNav").getElementsByTagName("li")[parseInt(num-1)].className='selected';
imgobj.style.display = "none";
oldobj.className='';
oldobj=document.getElementById("SwitchNav").getElementsByTagName("li")[parseInt(num-1)];
imgobj=document.images['img'+num];
num++;
if(num>4){num=1;}
nownum=num;
t=setTimeout("showimg("+num+")",3000);
}
function mouseimg(num){
if(t){clearTimeout(t)}
imgobj.style.display = "none";
oldobj.className='';
document.images['img'+num].style.display = "";
oldobj=document.getElementById("SwitchNav").getElementsByTagName("li")[parseInt(num-1)].className='selected';
oldobj=document.getElementById("SwitchNav").getElementsByTagName("li")[parseInt(num-1)];
imgobj=document.images['img'+num];
nownum=num;
}
function outmouse(){
nownum++;
if(nownum>4){nownum=1;}
t=setTimeout("showimg("+nownum+")",3000);
}

代码3 CSS(将下面css文件拷贝到显示网页的css里面)

* {margin: 0px;padding: 0px;}
a {color: #828282;text-decoration: none;}
a:hover {color: #cc0000; text-decoration:underline;}
img{border:0px;}

.flashbox {
OVERFLOW: hidden;
POSITION: relative;
HEIGHT: 291px;
}
.flashbox .pic {
LEFT: 0px;
WIDTH: 761px;
POSITION: absolute;
TOP: 0px;
HEIGHT: 291px;
}
.flashbox UL {
LEFT: 761px;
WIDTH: 223px;
POSITION: absolute;
TOP: 0px
}
.flashbox LI {
padding-top: 1px;
OVERFLOW: hidden;
LINE-HEIGHT: 72px;
HEIGHT: 72px
}
.flashbox LI A {
DISPLAY: block;
BACKGROUND: url(右边模块的低背景图片地址) right top no-repeat;
COLOR: #212121; padding-left:53px;

POSITION: relative;
HEIGHT: 72px;
font-size:14px;

text-align:left;
}
.flashbox LI.selected A {
BACKGROUND: url(右边模块的滚动图片地址) 2px top no-repeat;
COLOR: #000;
TEXT-DECORATION: none;font-weight:bolder;
}
.flashbox LI A:hover {
BACKGROUND: url(右边模块的滚动图片地址) 2px top no-repeat;
COLOR: #000;
TEXT-DECORATION: none;font-weight:bolder;
}

网站例子:(此网站是由www.diannaozs.com团队开发)

www.abo-m.com网站首页图

美女写真

两性知识

幽默搞笑

热门新闻

  
推荐视频:
Windows Vista安装
Windows XP安装
设置BIOS
硬盘分区
经典FLASH动画视频教程
Photoshop视频教程
Dreamweaver视频教程
C语言视频
DOS 视频教程 (黑客入门)
推荐工具:
手机号、身份证、区号查询
城市地图
计算器
火车查询
健康指数查询
许愿树
爱墙祝福
Q爱
flash小游戏
站长工具:
IP查询
PR 值查询
Alexa排名查询
网站运营
百度优化
Google优化
Alexa排名
更多……
网站联盟:
中国学生网(校园类型网站)
第三导航(协助上网)
Flash小游戏(小游戏)
人人健康
七楼科技 (科技)
  • 上一篇源代码:

  • 下一篇源代码:
  • 相关文章
    页面上下滚动
    滚动显示的LOGO

    Copyright 2007-2011 电脑知识网(http://www.diannaozs.com) All rights reserved
    公安局备案:京公网安备110107000134
    信产部备案:京ICP备08100023号