`
lz726
  • 浏览: 335314 次
  • 性别: Icon_minigender_2
  • 来自: 福建,福州
社区版块
存档分类
最新评论

优化后的图片广告效果

XHTMLHTML 
阅读更多 
<%@ 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>
 
分享到：
| 基本上已经无语
评论
发表评论

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

相关推荐

    jQuery流行广告效果

    10. **A/B测试**：在实施广告效果后，通过A/B测试对比不同版本的效果，找出最能吸引用户的方案。这通常需要集成一些分析工具，如Google Analytics，以收集和分析用户行为数据。 在提供的压缩包中，`index.htm`应该...

    广告图片切换效果代码

    在IT行业中，广告图片切换效果是网页设计和前端开发中常见的功能，用于吸引用户的注意力，提升用户体验。这个“广告图片切换效果代码”提供了一种实现此类功能的方法。下面，我们将详细探讨这一技术及其相关知识点。...

    网页常用各种广告效果JS集合

    网页开发中的广告效果是提升用户体验和吸引用户注意力的重要手段，JavaScript（JS）作为一种强大的客户端脚本语言，在实现这些效果上发挥了关键作用。本资源“网页常用各种广告效果JS集合”汇集了多种常见的网页广告...

    android 广告效果图片动态显示

    在Android应用开发中，广告是常见的收入来源...综上所述，"android 广告效果图片动态显示"涉及到Android UI设计、动画、数据加载策略等多个方面，开发者需要综合运用这些技术来创建一个既吸引人又流畅的广告展示效果。

    Jquery 广告效果

    广告效果通常依赖于高质量的图像，这些图片可以通过CSS控制显示，或者作为jQuery动画的对象。 4. **js** - 这里包含的JavaScript文件是整个广告效果的核心。jQuery提供了许多内置方法和插件来创建动画，例如`....

    滑动图片展示广告效果.rar

    在IT行业中，滑动图片展示广告效果是一种常见的网页设计元素，尤其在电子商务、新闻网站以及各种营销页面中广泛应用。这种效果通常由JavaScript（JS）实现，以创建动态、吸引人的用户体验，提高用户对产品的关注度和...

    滑动图片展示广告效果

    标题"滑动图片展示广告效果"所指的是一种常见的网页设计技术，它用于制作动态的、引人入胜的广告展示，以提高用户体验并增加用户参与度。这种技术通常被称为轮播图或幻灯片展示，广泛应用于网站的首页、产品展示或...

    网页对联广告。对联滚动图片效果

    网页对联广告是一种常见的网页设计元素，通常出现在网站的两侧，形状类似传统的对联，用于展示动态滚动的图片或文字信息。这种效果可以吸引用户的注意力，增加广告的可见度，从而提升网站的互动性和用户体验。在本...

    jQuery流行广告效果.zip_jQuery流行广告效果

    《jQuery流行广告效果详解》 在网页设计与开发中，吸引用户的注意力并引导他们进行交互是至关重要的。...在实际项目中，结合压缩包中的资源，我们可以不断优化和创新广告效果，以满足不同场景的需求。

    广告变换图片轮显效果

    在IT行业中，广告变换图片轮显效果是一种常见的网页设计技术，用于吸引用户的注意力并展示多样化的内容。这种技术常被应用于网站的首页、产品展示区或者推广活动区域，以动态的形式循环播放多张图片，增强用户体验，...

    淘宝网首页广告轮换效果

    淘宝网首页的广告轮换效果是在线零售领域中一种常见的网页设计技术，用于吸引用户的注意力，提高广告的展示效率。这种效果通常由JavaScript实现，结合CSS和图像资源来完成动态展示。下面将详细介绍这一技术涉及的...

    广告图片切换效果

    在网页设计中，广告图片切换效果是一种常见的动态展示方式，用于吸引用户注意力并展示多张广告图片。这种效果通常应用于网站的轮播图或者广告横幅。以下将详细讲解实现广告图片切换效果的关键技术和相关知识点。 一...

    迅雷首页图片广告效果

    在IT行业中，"迅雷首页图片广告效果"是一种常见的网页设计技术，主要目的是吸引用户注意力，提高用户体验，以及有效地展示产品或服务信息。这个技术通常被称为"走马灯"效果，也就是轮播图或者滑动展示的效果。在迅雷...

    安卓图片轮播广告轮播自动滚屏相关-完美的viewpager左右无限循环实现广告自动手动轮播效果。无BUG.rar

    综上所述，实现一个完美的图片轮播广告轮播效果，需要深入理解ViewPager的工作原理，巧妙地使用Adapter、PageTransformer、Handler以及生命周期管理。通过不断测试和优化，我们可以构建出一个无BUG、用户体验良好的...

    知乎效果广告账户指导及基础优化手册V1.0-3.8日 .pdf

    4. 广告效果评估：手册可能会讲解如何通过数据分析来评估广告效果，例如查看广告展现量、点击率、互动量、转化率等指标。 5. 账户优化策略：这是指根据广告数据反馈调整广告计划，优化广告设置，提升广告效果。可能...

    jquery广告上下左右滚动效果

    在网页设计中，吸引用户注意力的一种常见方式是通过动态展示广告，如上下左右滚动的广告效果。本教程将详细讲解如何利用jQuery库实现这样的功能，尤其适用于创建吸引人的广告链接特效。 首先，jQuery是一个强大的...

    图片切换展示对联广告图片展示效果

    在IT行业中，尤其是在网页开发领域...而“对联广告”和“图片展示效果”则更具体地指向了广告设计和视觉呈现，是提升网站吸引力的重要手段。在实际应用中，开发者需要综合运用这些知识点，以实现高效且美观的图片展示。

    100个JavaScript编写的广告效果(B)

    在广告行业中，JavaScript常被用来实现各种创意广告效果，提高用户体验，吸引用户的注意力，从而提升广告的点击率和转化率。"100个JavaScript编写的广告效果(B)"是一个集合，包含了多种用JavaScript实现的广告设计...

    6种不同效果的JS广告代码特效

    总的来说，这个压缩包提供了多样化的JS广告代码特效，可以根据你的网站需求选择合适的方案，提升广告效果。通过学习和理解这些代码，你不仅可以增强网站的视觉吸引力，还能进一步提升你的JS编程技能。

    JS+html 渐变滚动切换广告图片效果

    通过结合HTML的结构与JavaScript的动态特性，我们可以创建出各种各样的动态广告效果，提升网站的视觉吸引力。在实际开发中，开发者还可以根据需求进一步优化，如添加触摸事件支持、动画缓动效果等，以适应不同的应用...

Magicbox
Global site tag (gtag.js) - Google Analytics