AJAX进行动态幻灯片广告设计

原创 2007年09月14日 11:37:00

 

          相信大家都有这样的体验-----无论是在网易,腾讯,还是新浪网等大型网站的首页或显要位置,都会有这样类似于幻灯片的广告或图片展示(以下简称幻灯片广告),看下面: 

利用幻灯片广告,不但可以节省页面空间,而且可以给用户带来更好的体验,用户不用来回拖动滚动条,就可以看到带有五副甚至更多图片的几条头条新闻,该是多么惊喜!

也许你不曾关注,但我确实好奇过。下面与大家分享我的学习成果吧:

制作本示例只需要三个最基本的文件,它们放置在同一个文件夹下

ashx文件夹

                   flash.htm

                   flash.ashx

                   flash.mdb

flash.htm的代码比较简单,但是最关键的,它只有脚本块,没有html代码,下面贴出来看:

 

<script type="text/javascript">
<!--    //焦点图顺序调整
    var order=new Array("","3","4","2","1","5");//改变数组值的顺序即可改变焦点图显示顺序
                                //注意数组的第一个元素值保持为空,从第二个开始填写顺序
    var xb;

    
var pics="";
    
var links="";
    
var texts="";
//---------------------------异步数据获取开始---------------------
    var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); 
     
    xmlhttp.open(
"post""flash.ashx",false);
    xmlhttp.send(
"");
    
var res=xmlhttp.responseText
    eval(res);
        
//---------------------------异步数据获取结束---------------------
    var focus_width=245
    
var focus_height=180
    
var text_height=25
    
var swf_height = focus_height+text_height
    
    
var j=0;
        
for (i=1;i<=5;i++...{
                xb
=order[i];
            
if( (imgUrl[xb]!=""&& (imgLink[xb]!="") ) ...{
                              
if(j !=0)...{
                     pics
=pics+"|";
                     links
=links+"|";
                     texts
=texts+"|";
                  }

                     pics
=pics+imgUrl[xb];
                     links
=links+imgLink[xb];
                     texts
=texts+imgText[xb];
                  j
++;
            }
 
        }
    
    
    
    
//在页面添加<object>标记对象,以显示flash对象
    document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=" http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
    document.write(
'<param name="allowScriptAccess" value="sameDomain"><param name="movie" value=" http://www.sinaimg.cn/bj/zonghe/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#dfdfdf">');
    document.write(
'<param name="menu" value="false"><param name=wmode value="opaque">');
    document.write(
'<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
    document.write(
'<embed src="" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#dfdfdf" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" http://www.macromedia.com/go/getflashplayer" />');        document.write('</object>');
    
    
//-->
</script>

因为我所用的浏览器是IE的,所以在创建xmlhttprequest对象时,我只考虑了IE环境下的情况,事实时,我们还要兼顾一下FireFox等浏览器,通常,我们会采取类似下面的方法创建xmlhttprequest对象:

function createXMLHttpRequest() ...{
   
    
if (window.ActiveXObject) ...{
        xmlHttp 
= new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    
else if (window.XMLHttpRequest) ...{
        xmlHttp 
= new XMLHttpRequest();
    }

    
}

以上代码都是现成的,就不多说了。下面接着看flash.ashx文件。在上一节的“即划即译”设计随笔中,我们提到了可以借助于.net提供的ashx(active server handler extension)轻松实现:

 

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Text;
using System.Data.OleDb;
public class Handler : IHttpHandler ...{
    
public void ProcessRequest (HttpContext context) ...{
        context.Response.ContentType 
= "text/plain";
        StringBuilder img_list 
= new StringBuilder(" var imgUrl=new Array();  var imgLink=new Array();   var imgText=new Array(); ");
        OleDbConnection conn 
= new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=style/ashx/flash.mdb;");
        OleDbCommand comm 
= conn.CreateCommand();
        comm.CommandText 
= "select top 5 * from ad order by rq desc";
        conn.Open();
        
using (OleDbDataReader dr = comm.ExecuteReader())
        
...{
            
int i = 1;
            
while (dr.Read())
            
...{
                img_list.AppendFormat(
"imgUrl[{3}]='{0}';imgLink[{3}]='{1}';imgText[{3}]='{2}';", dr["imgURL"].ToString(), dr["imgLink"].ToString(), dr["imgText"is System.DBNull ? string.Empty : dr["imgText"].ToString(), i++);
            }


        }

        conn.Close();
        context.Response.Write(img_list.ToString());
        context.Response.Flush();
        context.Response.End();
    }

 
    
public bool IsReusable ...{
        
get ...{
            
return true;
        }

    }


}

 

 在上面的处理文件中,主要做了以下工作,查询数据库数据,获取数据并格式化。

在格式化数据时,我采用了以实例化数组作为响应数据的形式,把从access数据库读取到的数据,存入imgURL,imgLink,imgText三个数组中,分别存储每个显示图片的图片地址,链接地址和提示文本。这样一来,服务器端处理程序直接向客户端返回了客户端乐于接受的数组(Array)对象,再在客户端接受这些数据就很方便了.

说到这里,我们后退一步,再来看一下下面一段代码:

    var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); 
     
    xmlhttp.open(
"post""flash.ashx",false);
    xmlhttp.send(
"");
    
var res=xmlhttp.responseText
    eval(res);
//直接计算表达式的值

  看到eval()方法了吧,如此简单!

好,现在我们已经把客户端和服务器端都准备好了,现在来就剩下数据的存储和读取了。

数据库flash只有一个表ad:

好了,到此,我们的幻灯片广告设计就结束了。谢谢关注!

“互联网 +”时代高校课堂教学改革的研究 ——以《广告设计》为例

摘 要:本文以《广告设计》的教学改革为立足点,结合“互联网 +”时代《广告设计》课堂遇到的挑战,提出“互联 网 + 广告设计教育”,简单来说就是结合线上的网络资源和线 下的师生互动来完成“教—学—...

25个令人难忘的广告设计

广告无处不在。我们能忽视广告?然而,有一些聪明的人,当他们看到广告的时候,他们欣赏广告背后的思想。即使这是一个他们从来没有实际购买的产品,他们依然微笑。他们甚至可能会拍摄一张照片,也可能会购买其产品与...
  • goodfav
  • goodfav
  • 2013年07月09日 17:39
  • 1541

平面广告设计课程中发散思维训练

广告创意是广告的生命之血,能够引起人们共鸣,促进购买欲望。而在我们生活中这样的广告实在太少了,原因主要是在创作中,创意思维模式过于机械化,难以创造出优秀的广告,创意需要灵感,需要创造性的思维模式。而在...

30个绝对让你惊叹的幽默创意广告设计

日期:2012-7-24  来源:GBin1.com 设计来源于创意,同时也来源于生活,广告设计在于最好的将产品特色体现在广告之中,如果有一点儿小幽默那就更完美了,记得原来我们推荐过的30个绝对...
  • jjfat
  • jjfat
  • 2012年07月24日 10:56
  • 506

至和设计专注于商业广告设计的核心定位

至和广告设计公司认为就商业环境的情感化设计而言,作为一个具有现代广告设计理念的设计师应充分重视情感化的需求、积极运用设计语言组织商业环境中的各要素,为人们营造一个富有情感色彩和审美愉悦的空间场所。其空...

2012年最具创意旅游广告设计 【平面设计】

  • aerchi
  • aerchi
  • 2012年05月17日 18:02
  • 1779

对联广告设计

  • 2014年05月08日 11:00
  • 119KB
  • 下载

某创新广告设计公司网站源代码

  • 2013年03月29日 14:30
  • 3.23MB
  • 下载

超级实用且不花哨的js代码大全 (六) ----代码判断,幻灯片播放器,广告效果

function checkid(iden,year,month,day){ if (iden.value.length==15) { if ((iden.value.lastIn...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX进行动态幻灯片广告设计
举报原因:
原因补充:

(最多只允许输入30个字)