优化后的图片广告效果

最新推荐文章于 2015-05-15 20:09:32 发布
最新推荐文章于 2015-05-15 20:09:32 发布 · 225 阅读
文章标签：
#XHTML #HTML
技术学习专栏收录该内容
45 篇文章
订阅专栏
<%@ page contentType="text/html;charset=utf-8"%>
<%
  Object[]  advRow=advMgr.getAdvByTpye(3);
  int len=advRow.length;//循环次数用
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
  <title>首页主体滚动广告位</title>
<style>
#div_madv{
     width:518px!important;
	 width:516px;
	 height:185px !important;
     height:189px;
     border-left:1px #FD5555 solid;
	 border-right:1px #FD5555 solid;
	 margin: 0px!important;
	 margin-top: -2px;
	 margin-left:1px;
}
/*画圆弧用的样式*/
.line{
	height:1px;
	overflow:hidden;
	border-left:1px #FD5555 solid;
	border-right:1px #FD5555 solid;
}
/*左边图片和标题显示层*/
#div_madv  #div_left{
   float:left;
   margin:0px;
   padding:0px;
   width:489px;
   height:185px !important;
   height:189px;
}
#div_madv  #div_left  #bigimg{
   margin-top:-2px !important;
   margin-top:0px;
   padding-top:-2px;
   width:489px;
   height:158px!important;
   height:162px;

}
#div_madv  #div_left  #bigimg  ul{
   list-style: none;
}
#div_madv  #div_left  #bigimg img{
  width: 489px;
  height: 162px;
  border: 0px;
  margin-bottom:7px;
}

/*数字样式*/
#div_madv  #smalllink{
   float: right;
   width: 25px;
   height: 100%;
   text-align: left;
}
#div_madv  #smalllink ul{
  list-style: none;
  margin-top: 30px;
}
#div_madv   #smalllink li{
  width: 15px;
  height:15px;
  margin-left:2px;
  margin-bottom:5px;
  text-align:center;
  border: 1px #ccc solid;
}
#div_madv   #smalllink a{
  width: 15px;
  height:15px;
}
#div_madv  #smalllink a:hover{
	background-color:#9FD262;
}
/*主题显示样式*/
#div_madv  #div_left  span{
   width:100%;
   text-align:center;
   height:12px;
}
#div_madv  #div_left  span  a{
	color: #325302; 
}
#div_madv #div_left  span  a:hover{
	color: #fff;
	background-color: #325302; 
}
.displayblock{
	display: block;
}
.displaynone{
	display: none;
}
.bgGreen{
  color:#fff;
  background-color:#9FD262;
}

</style>
<script>
var currslid = 0;
var slidint;
function  setfoc(linkid){
    var length=<%=len%>;
    for(var i=0;i<length;i++){
     if(i==linkid){ 
    	 document.getElementById("linkid"+i).className="displayblock";
    	 document.getElementById("linkstyle"+i).className="bgGreen";
      }else {
         document.getElementById("linkid"+i).className="displaynone";
         document.getElementById("linkstyle"+i).className="color_blue";
      }
    }
	currslid =linkid;
	stopit();
}
function playnext(){
	if(currslid==<%=len-1%>){
		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>  <!-- 画弧线的层begin -->
<div class="line" style="margin-left:3px;width:512px;background:#FD5555"></div>
<div class="line" style="margin-left:2px;width:514px;"></div>
<div class="line" style="margin-left:1px;width:516px;"></div>
<div id="div_madv"> <!-- 展示信息的层begin-->
   <div id="div_left">
     <div id="bigimg">
        <%String  focus="";
          String  linkid="linkid";
          for(int a=0;a<advRow.length;a++){
             linkid="linkid"+a;
             if(a==0){
                  focus="displayblock";
             }else {
                 focus="displaynone";
             }
        %>
        <ul id=<%=linkid%> class=<%=focus%>>
        <li><a  href="<%=advRow[a].getString("link")%>" >
        <img src="<%=webRoot%>/upload_adv/<%=advRow[a].getString("path")%>"/></a>
        </li> 
		<li>
		  <span><a  href="<%=advRow[a].getString("link")%>" title="">
		  <%=advRow[a].getString("title")%></a></span></li> 
		</ul>  
        <%} %>
     </div>
   </div>
    <div id="smalllink">
        <ul>
        <%
         String flink="";
         String  linkstyle="";
         for(int  i=0;i<advRow.length;i++){
           linkstyle="linkstyle"+i; 
           if(i==0){
              flink="bgGreen";
           }else {
             flink="";
           }
        %>
        <li id=<%=linkstyle%> class="<%=flink%>">
        <a href="#" onmouseover=setfoc('<%=i%>'); onmouseout=playit();><%=i+1%></a></li>
        <%} %>
        </ul>
    </div>
</div>  <!--展示信息的层end-->
<div class="line" style="margin-left:1px;width:516px;"></div>
<div class="line" style="margin-left:2px;width:514px;"></div>
<div class="line" style="margin-left:3px;width:512px;background:#FD5555"></div>
</div><!-- 画弧线的层end -->
</body>
</html>