15 12
发新话题
打印

Zblog的Flash图片切换效果-JS方法

Zblog的Flash图片切换效果-JS方法

看到论坛上有人也需要这样的方法。看了下,自己也改了个JS调用的图片切换效果。
由于我这样的菜鸟大概没有上传的权限,所以只好写步骤而不传文件了。
第一步,把下面这一段JS保存为ad.js。
引用:
imgUrl1="UPLOAD/01.jpg";   //图片地址,下同
imgtext1="测试"            //图片的说明文字,下同
imgLink1=escape("http://www.makewing.com");     //图片的超连接地址,下同
imgUrl2="UPLOAD/02.jpg";
imgtext2="测试2"
imgLink2=escape("http://www.makewing.com");
imgUrl3="UPLOAD/03.jpg";
imgtext3="测试3"
imgLink3=escape("http://www.makewing.com");
imgUrl4="UPLOAD/04.jpg";
imgtext4="测试4"
imgLink4=escape("http://www.makewing.com");
imgUrl5="UPLOAD/05.jpg";
imgtext5="测试5"
imgLink5=escape("http://www.makewing.com");

var focus_width=190          //宽度
var focus_height=160         //高度
var text_height=20
var swf_height = focus_height+text_height

var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3+"|"+imgUrl4+"|"+imgUrl5
var links=imgLink1+"|"+imgLink2+"|"+imgLink3+"|"+imgLink4+"|"+imgLink5
var texts=imgtext1+"|"+imgtext2+"|"+imgtext3+"|"+imgtext4+"|"+imgtext5

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="script/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
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="script/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" 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>');
这个文件做了简单的说明,很容易理解。
第二步:把ad.js文件放入SCRIPT文件夹。把bestsky.cn说的那个FLASHPIC插件目录下面的plugin\flashpic目录下的pixviewer.swf文件也拷贝到SCRIPT文件夹。
第三步:修改模板,打开TEMPLATE目录下的default.html,找到<div id="divSidebar">插入如下代码
引用:
<div class="function" id="divAD">
<a target=_self href="javascript:goUrl()" style="border:none;margin:0;padding:0;">
<span style="border:none">
    <script language="JavaScript" src="<#ZC_BLOG_HOST#>script/ad.js" type="text/javascript"></script>
</span></a>
</div>
这个DIVAD的DIV是自己添加的。用function的class即可。

ok,完工了。当然如果你觉得文件太混乱,可以修改以适应到相应的目录即可。
至于以后如何修改这个幻灯广告的话,很简单,后台管理里的文件管理,进入script目录对ad.js进行编辑即可。

需要注意的地方:这个JS文件必须保存为UTF-8的,不然乱码。

需要改进的地方:IE测试正常,FF测试有小小的问题,就是图片下面那个说明文字高度不够,改了都没有效果,郁闷。不知道哪位大虾能够完善下?

谢谢。

TOP

不破坏程序代码,只修改模板,并且JS代码更新等都很方便。

原始代码请看这里http://www.blueidea.com/articleimg/2006/03/3319/10/index.html
推荐这篇“常用JS网页广告代码”:http://www.blueidea.com/download/product/2006/3319.asp
第十个效果就是本文所用效果

[ 本帖最后由 tangf 于 2006-8-13 10:38 AM 编辑 ]

TOP

怎么让它居中啊?

谢谢楼主,连我这个小菜鸟也学会了!
就是怎么样才能让它相对于日历居中啊?
本帖最近评分记录
  • washun 金钱 +5 精品文章 2007-1-17 20:14

TOP

这个方法好!!我用在1.7新版上了,没有问题。


[ 本帖最后由 washun 于 2007-1-18 09:37 编辑 ]
ZIPPO广州实体店-全场4折起,售后7天包退换。
支持Z-blog,谴责篡改&去除版权标记的可耻行为
------------------------------------------------------------------------------------------
新手请多看应用教程区Z-wiki,或站内搜索寻找答案
1、Z-blog主题修改助手   2、默认模板右侧栏目代码注释       3、默认CSS样式的注释     
4、Z-BLOG使用小贴士收集         5、Z-Blog模板标签库及相关说明   6、加广告请搜索gg/google/广告

TOP

要是能整合进相册就 好了.;P

TOP

引用:
原帖由 stephen 于 2007-4-23 17:06 发表
要是能整合进相册就 好了.;P
看看我的相册插件,可以满足你的要求。

http://bbs.rainbowsoft.org/viewthread.php?tid=12723&extra=page%3D2
数数指甲http://www.ly705.cn

TOP

flashpic到哪里下载?

TOP

嘿嘿 用上了,不错,赞一个

TOP

引用:
原帖由 iguitar 于 2007-5-8 19:46 发表
flashpic到哪里下载?
下不到!!!!!

TOP

在论坛搜索“flashpic” 或者直接去源码修改区找
ZIPPO广州实体店-全场4折起,售后7天包退换。
支持Z-blog,谴责篡改&去除版权标记的可耻行为
------------------------------------------------------------------------------------------
新手请多看应用教程区Z-wiki,或站内搜索寻找答案
1、Z-blog主题修改助手   2、默认模板右侧栏目代码注释       3、默认CSS样式的注释     
4、Z-BLOG使用小贴士收集         5、Z-Blog模板标签库及相关说明   6、加广告请搜索gg/google/广告

TOP

在php中如何使用呢

在php中如何使用呢,那一位高人告诉一下,先谢了

TOP

不错,赞一个

TOP

 15 12
发新话题