随笔-211  评论-26  文章-8  trackbacks-0
在sina,sohu,xunlei 等大型网站,flash幻灯片效果的网页图片滚动效果 已经十分的普遍。
我查看了代码,都不够灵活。于是特意整理了一下,做成了一个简单的函数,直接设置参数,调用即可。

效果预览http://www.hbcms.com/script/roll_pic.html

参考了sina和sohu的代码,整理的函数和使用方法如下:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>生成幻灯片式的网页图片滚动代码</TITLE>

</HEAD>

<BODY>
<CENTER>

<script type="text/javascript">

// 幻灯片式的网页图片滚动函数(不需要做任何改动)
function roll_pic_flash(roll_pic_ary) {
 // 生成幻灯片式的网页图片滚动代码
 // Improved by www.HBcms.com 2006-12-22
 var w   = roll_pic_ary[3][0];
 var h   = roll_pic_ary[3][1];
 var text_h  = roll_pic_ary[3][2];
 var bgcolor  = roll_pic_ary[3][3];
 var roll_swf = roll_pic_ary[3][4];
 var swf_height = h + text_h;
 var pics  = roll_pic_ary[0].join("|");
 var links  = roll_pic_ary[1].join("|");
 var texts  = roll_pic_ary[2].join("|");
 // 本函数由HBcms(宏博内容管理系统)整理优化
 // 最新版本: http://www.hbcms.com/script/roll_pic.html
 return '<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="'+ w +'" height="'+ swf_height +'"><param name="default_url" value="http://www.hbw.cn/"><param name="allowScriptAccess" value="sameDomain"><param name="movie" value="' + roll_swf + '"><param name="quality" value="high"><param name="bgcolor" value="'+bgcolor+'"><param name="menu" value="false"><param name="improved_by" value="http://www.hbcms.com/"><param name=wmode value="opaque"><param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+w+'&borderheight='+h+'&textheight='+text_h+'"><embed src="' + roll_swf + '" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+w+'&borderheight='+h+'&textheight='+text_h+'" menu="false" bgcolor="'+bgcolor+'" quality="high" width="'+ w +'" height="'+ h +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>';

}

// 开始设置幻灯片参数
var roll_pic_width = 300; // 图片宽度
var roll_pic_height = 150; // 图片高度
var roll_text_height = 18; // 文字高度
var roll_bgcolor = '#FFFFFF'; // 幻灯片背景色
var roll_flash = 'http://www.hbcms.com/hbcms/script/roll_pic_new.swf'; // 幻灯片flash地址,请将此flash下载保存到你的服务器,以免失效

// 幻灯片数组roll_pic_ary初始化(不用做任何改动)
var roll_pic_ary = new Array(Array(0),Array(0),Array(0),
Array(roll_pic_width,roll_pic_height,roll_text_height,roll_bgcolor,roll_flash));

// 增加一个图片,连接,文字说明
roll_pic_ary[0].push("http://www.hbcms.com/hbcms/image/gg/hbcms.jpg");
roll_pic_ary[1].push(escape("http://www.hbcms.com/cms/08/191.html"));
roll_pic_ary[2].push("HBcms V0.8.7 版本2006年12月20日正式发布");

// 增加一个图片,连接,文字说明
roll_pic_ary[0].push("http://www.hbcms.com/hbcms/image/gg/hbcms.jpg");
roll_pic_ary[1].push(escape("http://bbs.hbcms.net/viewthread.php?tid=92&extra=page%3D1"));
roll_pic_ary[2].push("免费加盟HBcms模板定制服务供应商(接受个人)");

// 增加一个图片,连接,文字说明
roll_pic_ary[0].push("http://www.hbcms.com/hbcms/image/gg/hbcms.jpg");
roll_pic_ary[1].push(escape("http://bbs.hbcms.net/viewthread.php?tid=90&extra=page%3D1"));
roll_pic_ary[2].push("把握商机:免费加盟HBcms专用主机提供商");

// 增加一个图片,连接,文字说明
roll_pic_ary[0].push("http://www.hbcms.com/hbcms/image/gg/design002.jpg");
roll_pic_ary[1].push(escape("http://bbs.hbcms.net/viewthread.php?tid=92&extra=page%3D1"));
roll_pic_ary[2].push("免费加盟HBcms模板定制服务供应商(接受个人)");

// 本代码由HBcms(宏博内容管理系统)整理优化
// 最新版本:http://www.hbcms.com/script/roll_pic.html
// 如果还需要增加图片,请copy上面的代码即可
// 如果还需要增加图片,请copy上面的代码即可
// 如果还需要增加图片,请copy上面的代码即可


// 显示幻灯片式的网页图片滚动
document.write(roll_pic_flash(roll_pic_ary));

// 如果要嵌入其他系统内(如cms),稍做修改即可使用
</script>

 


</CENTER>

<P>
</BODY>
</HTML>


java文件里面的语句:


sb.append("<script type=\"text/javascript\">\n");
sb.append("function roll_pic_flash(roll_pic_ary) {\n");

 sb.append("var w   = roll_pic_ary[3][0];\n");
 sb.append("var h   = roll_pic_ary[3][1];\n");
 sb.append("var text_h  = roll_pic_ary[3][2];\n");
 sb.append("var bgcolor  = roll_pic_ary[3][3];\n");
 sb.append("var roll_swf = roll_pic_ary[3][4];\n");
 sb.append("var swf_height = h + text_h;\n");
 sb.append("var pics  = roll_pic_ary[0].join(\"|\");\n");
 sb.append("var links  = roll_pic_ary[1].join(\"|\");\n");
 sb.append("var texts  = roll_pic_ary[2].join(\"|\");\n");
 
 
 sb.append("return '<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=\"'+ w +'\" height=\"'+ swf_height +'\">");sb.append("<param name=\"default_url\" value=\"http://www.hbw.cn/\">");sb.append("<param name=\"allowScriptAccess\" value=\"sameDomain\">");sb.append("<param name=\"movie\" value=\"' + roll_swf + '\">");sb.append("<param name=\"quality\" value=\"high\">");sb.append("<param name=\"bgcolor\" value=\"'+bgcolor+'\">");sb.append("<param name=\"menu\" value=\"false\">");sb.append("<param name=\"improved_by\" value=\"http://www.hbcms.com/\">");sb.append("<param name=wmode value=\"opaque\">");sb.append("<param name=\"FlashVars\" value=\"pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+w+'&borderheight='+h+'&textheight='+text_h+'\">");sb.append("<embed src=\"' + roll_swf + '\" wmode=\"opaque\" FlashVars=\"pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+w+'&borderheight='+h+'&textheight='+text_h+'\" menu=\"false\" bgcolor=\"'+bgcolor+'\" quality=\"high\" width=\"'+ w +'\" height=\"'+ h +'\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />");sb.append("</object>';\n");

sb.append("}\n");
// 开始设置幻灯片参数
sb.append("var roll_pic_width = 300;\n");
sb.append("var roll_pic_height = 150;\n"); 
sb.append("var roll_text_height = 18;\n"); 
sb.append("var roll_bgcolor = '#FFFFFF';\n"); 
sb.append("var roll_flash = '/news/roll_pic_new.swf'; \n");
sb.append("var roll_pic_ary = new Array(Array(0),Array(0),Array(0),");
sb.append("Array(roll_pic_width,roll_pic_height,roll_text_height,roll_bgcolor,roll_flash));\n");
rs.first();
   for(int i=0;i<iHeadNum;i++)
    {
     String NewsTitle = rs.getString(2);
     String sTitle = NewsTitle;
     int NewsID = rs.getInt(1);
     String HeadPicture = rs.getString(12); 
     if (NewsTitle.length()>20) sTitle = NewsTitle.substring(0,20) + ".."; 
     sb.append("roll_pic_ary[0].push(\""+HeadPicture+"\");\n");
     sb.append("roll_pic_ary[1].push(escape(\"ShowNews.jsp?NewsID="+NewsID+"\"));\n");
     sb.append("roll_pic_ary[2].push(\""+sTitle+"\");\n");
     
     rs.next();
    }               //循环语句可在这里    

sb.append("document.write(roll_pic_flash(roll_pic_ary));\n");


sb.append("</script>\n");

posted on 2008-04-09 00:09 dragon 阅读(636) 评论(0)  编辑  收藏 所属分类: jsp