低一度

顶部横幅

漂亮的焦点图片幻灯片效果{Js/flash}

2009-10-9 - diyidu - 免费资源 - Views

这款焦点新闻幻灯片效果(演示见下图),JS代码偶已经做了简单的修改,现在基本达到了无错、高效执行的要求。从外观上看,其背景结合了Flash播放器来呈现,灵活、大气、简洁,看了挺舒服的。如果有哪位小盆友想运用到Z-Blog上(如置于侧边栏,前提是要有足够的宽度,至少340PX以上),可按如下步骤操作即可——

漂亮的焦点图片幻灯片效果{Js/flash}

1.下载本资源!请点这儿下载。

2.解压,获取解压文件中images目录下的“swfobject.js”文件,上传至“wwwroot/THEMES/你的模板文件夹/SCRIPT/”目录下。获取Flash文件“v_pix_3.swf”,上传至“wwwroot/THEMES/你的模板文件夹/STYLE/你的模板文件夹/”目录下。

3.将以下代码插入“wwwroot/THEMES/你的模板文件夹/TEMPLATE/default.html”页面中你认为合适的位置(如侧边)。

<SCRIPT language=javascript src="wwwroot/THEMES/你的模板文件夹/SCRIPT/swfobject.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
    <!--//
          var focus_width=340;
                var focus_height=297;
                var text_height=0;
                var swf_height=focus_height + 0;
                var pics="图片路径1|图片路径2|图片路径3";
                var links="链接1|链接2|链接3";
                var texts="调用标题1|调用标题2|调用标题3";
                var fo = new SWFObject("wwwroot/THEMES/你的模板文件夹/STYLE/你的模板文件夹/v_pix_3.swf", "_FocusObj", focus_width, swf_height, "7","F6F8FA");
       fo.addVariable("pics", pics);
       fo.addVariable("links", links);
       fo.addVariable("texts", texts);
       fo.addVariable("borderwidth", focus_width);
       fo.addVariable("borderheight", focus_height);
       fo.addVariable("textheight", text_height);
       fo.addVariable("border_color", "0x000000");
       fo.addVariable("fontsize", "14");
       fo.addVariable("fontcolor", "5d5d5d");
       fo.addVariable("is_border", "");
       fo.addVariable("is_text", "1");
       fo.addParam("wmode", "opaque");
       fo.write("FocusObj");
//-->
</SCRIPT>

4.设置好调用图片的路径、链接Url和标题(注意,三者是对应的关系,即“图片路径1-链接1-调用标题1”同组),并确保JS和Flash两个文件准确指向之前上传的路径。修改完成后提交保存,后台“文件重建”。OK,完成啦。

附加说明:有关JS效果在Z-Blog上的运用,操作步骤大致与上面相似,大家可举一反三。

关键词 // 幻灯片 JavaScript Z-Blog技巧 图片调用
出处:低一度,链接:http://www.diyidu.cn/post/focus_images.html

上一篇:读不出光盘数据怎么办? 下一篇:Flash小游戏《完美停车》分享

随机推荐

to "漂亮的焦点图片幻灯片效果{Js/flash}"

  • 叨客
    #1 叨客 回复该留言 2009-10-10 23:59:40
    一个不错的实例教程,辛苦了,学习ing...
    diyidu 于 2009-10-11 0:03:55 回复
    呵,不客气。
  • 公关传播
    #2 公关传播 回复该留言 2009-12-27 16:22:40
    有用的教程,正好用得上。
    diyidu 于 2009-12-27 17:20:09 回复
    用吧,呵呵。老汤好久不见。
  • maymay
    #3 maymay 回复该留言 2010-6-11 1:01:23
    很漂亮,可惜不会用。
    diyidu 于 2010-6-11 8:30:56 回复
    按照教程操作啊。

Add comment

验证码