相信大家都有这样的体验-----无论是在网易,腾讯,还是新浪网等大型网站的首页或显要位置,都会有这样类似于幻灯片的广告或图片展示(以下简称幻灯片广告),看下面:
利用幻灯片广告 ,不但可以节省页面空间,而且可以给用户带来更好的体验,用户不用来回拖动滚动条,就可以看到带有五副甚至更多图片的几条头条新闻,该是多么惊喜!
也许你不曾关注,但我确实好奇过。下面与大家分享我的学习成果吧:
制作本示例只需要三个最基本的文件,它们放置在同一个文件夹下
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:
好了,到此,我们的幻灯片广告设计就结束了。谢谢关注!