一个首页图片广告效果

lz726

浏览: 335242 次
性别:
来自: 福建,福州

最近访客更多访客>>

mumume123

wangning1125

bugyun

luowuhua16

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

技术学习

JSP 浏览器 HTML

<%@ page contentType="text/html;charset=utf-8"%>
<html>
<head>
  <title>首页主体滚动广告位</title>
<style>
#div_madv{
	 width:100%;
     height:100%;
     margin:0px;
     padding:0px;
}
#div_madv #fpic {
     width:100%;
     height:96.5%;
     margin:0px;
     padding:0px;
     border-left:1px #FD5555 solid;
	 border-right:1px #FD5555 solid;
}
.line{
	height:1px;
	overflow:hidden;
	border-left:1px #FD5555 solid;
	border-right:1px #FD5555 solid;
}
#fpic #big_pic{
    border: 0px;
    width: 92.5%;
    margin: 0px;
    float:left;
    padding: 0px;
}
#fpic #big_pic #focpic {
	border: 0px;
    width:100%;
    float:left;
    padding: 0px;
    margin-left:-2px;
    margin-top: -2px;
}
#fpic #big_pic #fttltxt{
   float: left;
   width: 100%;
   padding-top:9px;
   text-align:center;
}
#fpic #big_pic #fttltxt a{
  color: #325302; 
  text-decoration: none;
}

#fpic #big_pic #fttltxt a:hover{
	color: #fff;
	background-color:#325302;
	text-decoration: underline;
}
#fpic #small_nav{
   width:7%;
   float:right;
   margin-top:5px;
}
#fpic #small_nav  .thubpic { 
	float:right;
	width: 30px;
	cursor: pointer;
	padding-top:5px;
	height:19px;
}
#fpic #small_nav .thubpiccur {
	padding-right: 0px; 
	padding-left: 4px; 
	z-index: 20;
	padding-bottom: 0px;
	width: 30px; 
	cursor: pointer;
    padding-top: 5px; 
    top: 10px; 
    height:19px;
}
#fpic #small_nav  .thubpiccur {
    z-index: 30;
    background: url(<%=webRoot%>/images/a_green.gif) no-repeat left 50%;
}
#fpic #small_nav  .thubpic img {
    border:1px red solid;
    width: 30px; 
    height:19px;
}
#fpic #small_nav  .thubpiccur img {
	border-right: #666 3px solid; 
	border-top: #666 2px solid;
	border-left: #666 3px solid;
	width: 30px;  
	height: 19px;
}
#fpic #small_nav .thubpiccur img {
	border-color: #079100; 
}

</style>
<script>
var currslid = 0;
var slidint;
function setfoc(id){
	document.getElementById("focpic").src = picarry[id];
	document.getElementById("foclnk").href = lnkarry[id];
	document.getElementById("fttltxt").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';
	currslid = id;
	for(i=0;i<5;i++){
		document.getElementById("tmb"+i).className = "thubpic";
	};
	document.getElementById("tmb"+id).className ="thubpiccur";
	focpic.style.visibility = "hidden";
	//focpic.filters[0].Apply();
	if (focpic.style.visibility == "visible") {
		focpic.style.visibility = "hidden";
		//focpic.filters.revealTrans.transition=23;
	}
	else {
		focpic.style.visibility = "visible";
		//focpic.filters[0].transition=23;
	}
	//focpic.filters[0].Play();//为了浏览器的兼容，先去掉这里的过滤效果
	stopit();
}

function playnext(){
	if(currslid==4){
		currslid = 0;
	}
	else{
		currslid++;
	};
	setfoc(currslid);
	playit();
}
function playit(){
	slidint = setTimeout(playnext,4500);
}
function stopit(){
	clearTimeout(slidint);
	}
window.onload = function(){
	playit();
}
</script>
</head>
<body>
<div id="div_madv">
<div class="line" style="margin-left:3px;width:526px;background:#FD5555"></div>
<div class="line" style="margin-left:2px;width:528px;"></div>
<div class="line" style="margin-left:1px;width:530px;"></div>

<div id=fpic>
<div id="big_pic">
	<a id=foclnk href="../index/test1.jsp" target=_blank>
	<img id=focpic style="filter: RevealTrans ( duration = 1，transition=23 );
	   visibility: visible; float: left;" height=156px alt=""
	 src="<%=webRoot%>/images/01.jpg" width=510px></a> 
	<div id="fttltxt">
	<a href="<%=webRoot%>/index/test1.jsp" target=_blank>广告图片1</a>
	</div>
</div>

<div  id="small_nav"  >
<div class=thubpiccur id=tmb0 onmouseover=setfoc(0); onmouseout=playit();>
	<a href="<%=webRoot%>/index/test1.jsp" target=_blank>
	<img src="<%=webRoot%>/images/01.jpg" alt="" width=30px; height=19px; border="0"></a>
</div>
<div class=thubpic id=tmb1 onmouseover=setfoc(1); onmouseout=playit();>
	<a href="<%=webRoot%>/index/test1.jsp" target=_blank>
	<img height=19px; alt="" src="<%=webRoot%>/images/02.jpg" width=30px></a>
</div>
<div class=thubpic id=tmb2 onmouseover=setfoc(2); onmouseout=playit();>
	<a href="<%=webRoot%>/index/test1.jsp" target=_blank>
	<img height=19px alt="" src="<%=webRoot%>/images/03.jpg" width=30px></a>
</div>
<div class=thubpic id=tmb3 onmouseover=setfoc(3); onmouseout=playit();>
	<a href="<%=webRoot%>/index/test1.jsp" target=_blank>
	<img height=19px alt="" src="<%=webRoot%>/images/04.jpg" width=30px></a>
</div>
<div class=thubpic id=tmb4 onmouseover=setfoc(4); onmouseout=playit();>
	<a href="<%=webRoot%>/index/test1.jsp" target=_blank>
	<img height=19px alt="" src="<%=webRoot%>/images/05.jpg" width=30px></a>
</div>
<script>
	var picarry = {};
	var lnkarry = {};
	var ttlarry = {};
	picarry[0] = "<%=webRoot%>/images/01.jpg";
	lnkarry[0]  = "index/test1.jsp";
	ttlarry[0] = "广告图片1主题显示处";
	picarry[1] = "<%=webRoot%>/images/02.jpg";
	lnkarry[1]  = "index/test1.jsp";
	ttlarry[1] = "广告图片2主题显示处";
	picarry[2] = "<%=webRoot%>/images/03.jpg";
	lnkarry[2]  = "index/test1.jsp";
	ttlarry[2] = "广告图片3主题显示处";
	picarry[3] = "<%=webRoot%>/images/04.jpg";
	lnkarry[3]  = "index/test1.jsp";
	ttlarry[3] = "广告图片4主题显示处";
	picarry[4] ="<%=webRoot%>/images/05.jpg";
	lnkarry[4]  = "index/test1.jsp";
	ttlarry[4] = "广告图片5主题显示处";
</script>
</div>
</div>

<div class="line" style="margin-left:1px;width:530px"></div>
<div class="line" style="margin-left:2px;width:528px;"></div>
<div class="line" style="margin-left:3px;width:526px;background:#FD5555"></div>
</div>
</body>
</html>

分享到：

对和错 | 我在长大？

2008-01-04 16:05
浏览 2194
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

一个首页图片广告效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

一个首页图片广告效果

评论

发表评论

相关推荐

ORA-01460: 转换请求无法实现或不合理

附件上传-入库篇

附件上传-前端篇

js的test方法

TO_CHAR_oracle_转换函数的用法

EXP-00056: 遇到 ORACLE 错误 6550

css中最强的属性--behavior

记录Invalid chunk ignored==

在Web应用中动态创建PDF文件

一个效果

SSL双向认证java实现

vi编辑器

linux JDK,tar.gz,rpm具体细节

overflow实现信息的显示和隐藏

Flash CS3 Remoting HelloWorld

调试flash remoting的两个工具

一个异常纪录下

Flash Remoting基础知识

迎接RIA时代的来临

一些FLEX资源

最近访客更多访客>>