当前位置:首页 > 免费资源 > 漂亮的焦点图片幻灯片效果{Js/flash}
Oct9th

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

diyidu 免费资源 3 人阅读了此文 我来说两句!

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

    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上的运用,操作步骤大致与上面相似,大家可举一反三。

本文出自:低一度,地址:http://www.diyidu.cn/post/focus_images.html,转载须注明!

to "漂亮的焦点图片幻灯片效果{Js/flash}" 引用该日志!

  1. 叨客
    #1 叨客 回复该留言 2009-10-10 23:59:40

    一个不错的实例教程,辛苦了,学习ing...

    diyidu 于 2009-10-11 0:03:55 回复
    呵,不客气。

  2. 公关传播
    #2 公关传播 回复该留言 2009-12-27 16:22:40

    有用的教程,正好用得上。

    diyidu 于 2009-12-27 17:20:09 回复
    用吧,呵呵。老汤好久不见。

  3. maymay
    #3 maymay 回复该留言 2010-6-11 1:01:23

    很漂亮,可惜不会用。

    diyidu 于 2010-6-11 8:30:56 回复
    按照教程操作啊。

此楼已盖到第3层了,目前尚未封顶!