样例012 flash+xml
此样例着重于教程
1、经过测试,这个幻灯片要求大图尺寸不能自适应,因此并不推荐。当然,如果使用者可以接受的话,还是不错的一个幻灯片。
2、建议先参考本文前面的案例,学会如何修改纯JS的样例。否则可能会看不懂。
===========================================================================
制作思路
附带xml文件的幻灯片,基本上与纯JS幻灯片一样,多出一个xml需要处理。 解决方法: 登陆后台—栏目—自定义页面—管理自定义页面—增加自定义页面 (注意,是在“栏目”内,而不是在“模板”中。) 可以看到需要输入以下内容: 页面模式(*)—使用直接页面式 页面名称(*)—输入“幻灯片012的xml”。这个仅仅是用于自己看的,指的并不是xml的文件名称 文件名(*)—这里控制xml文件的生成路径以及xml文件名 页面内容(*)—这里输入代码
===========================================================================
样例制作
1、来源于http://www.lanrentuku.com/js/jiaodiantu-747.html,自行下载压缩包解压。
2、记事本打开index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" /> <meta name="description" content="此代码内容为有Loading功能的Flash焦点图,属于站长常用代码,更多焦点图代码请访问懒人图库JS代码频道。" /> <title>有Loading功能的Flash焦点图_懒人图库</title> <script language="javascript" type="text/javascript" src="js/flash.js"></script><strong></strong> </head>
<body style="text-align:center">
<script language="javascript" type="text/javascript"> writeflashhtml("_swf=swf/xixi.swf", "_width=650", "_height=370" ,"_wmode=transparent"); </script>
<p>来源:<a href="http://www.mygood.com.cn/cn/main_news.asp" target="_blank">mygood</a> 整理:<a href="http://www.lanrentuku.com/" target="_blank">西西</a> 感谢:<a href="http://www.mybbss.com/" target="_blank">图鉴</a></p> <p>*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p> <p></p> <p><p>Flash+xml焦点图代码,可前后翻页,可自动滚动,推荐下载!</p></p> <p></p> </body> </html> |
红色代码为head区载入js文件,蓝色代码为正文引用。 PS:显然head区载入后面跟了一个<strong></strong>,应该是写错了,弃之。
3、找到js文件文件复制粘贴重命名为flash012.js,复制粘贴至D:\EmpireServer\web\huandengpian\huandengpian012\文件夹。 并修改代码如下: <head> <script language="javascript" type="text/javascript" src="flash012.js"></script> </head>
4、找到flash文件复制粘贴重命名为flash012.swf,复制粘贴至D:\EmpireServer\web\huandengpian\huandengpian012\swf\文件夹。(没有就自己新建) 并修改代码如下,放置到[!--temp.header--]下面 <script language="javascript" type="text/javascript"> writeflashhtml("_swf=swf/flash012.swf", "_width=650", "_height=370" ,"_wmode=transparent"); </script>
5、有必要作为单独一点提醒的是:swf文件、xml文件,都不要改变路径。 因为swf里面指定了xml文件引用的位置。 所以在第4点里,我不再放置为writeflashhtml("_swf= flash012.swf ", "_width=650", "_height=370" ,"_wmode=transparent"); 而是放置为writeflashhtml("_swf= swf/flash012.swf ", "_width=650", "_height=370" ,"_wmode=transparent"); (.xml文件类似) 当然,如果代码中指定了.xml文件的话,就可以避免这类问题。
6、处理xml文件(此例中为根目录下的data.xml)
6.1栏目—自定义页面—管理自定义页面—增加自定义页面
6.2页面模式(*)—使用直接页面式
6.3页面名称(*)—输入“幻灯片012的xml”。这个仅仅是用于自己看的,指的并不是xml的文件名称
6.4操作之前,请先将D:\EmpireServer\web\huandengpian\huandengpian012\文件夹内的data.xml命名为“附件data.xml”。因为这个data接下来我们会自己生成。 文件名(*)—点击“选择目录”—弹出框中点击“huandengpian”—点击“huandengpian012”左侧的单选框—可以看到输入框中显示为“../../huandengpian/huandengpian012/”—将这个改为“ ../../huandengpian/huandengpian012/data.xml ”
6.5页面内容(*) 解压包里面的data.xml,用记事本打开,得到如下代码
<?xml version="1.0"?> <Banner bannerWidth="650" bannerHeight="370"
textSize="14" textColor="" textAreaWidth="" textLineSpacing="0" textLetterSpacing="-0.5" textMarginLeft="12" textMarginBottom="3" transitionType="1" transitionDelayTimeFixed="8" transitionDelayTimePerWord=".5" transitionSpeed="8" transitionBlur="yes" transitionRandomizeOrder="no" showTimerClock="yes" showBackButton="yes" showNumberButtons="yes" showNumberButtonsAlways="Yes" showNumberButtonsHorizontal="yes" showNumberButtonsAscending="yes" autoPlay="yes"> <item image="images/1.jpg" link="http://www.lanrentuku.com/" textBlend="no"><![CDATA[]]></item>
<item image="images/2.jpg" link="http://www.lanrentuku.com/" textBlend="no"><![CDATA[]]></item>
<item image="images/3.jpg" link="http://www.lanrentuku.com/" textBlend="no"><![CDATA[]]></item>
<item image="images/4.jpg" link="http://www.lanrentuku.com/" textBlend="no"><![CDATA[]]></item>
<item image="images/5.jpg" link="http://www.lanrentuku.com/" textBlend="no"><![CDATA[]]></item> </Banner> |
以上红色部分就是需要修改的地方,下面给出修改好的代码,务必注意红色代码。 <?='<?xml version="1.0"?>'?> <Banner bannerWidth="650" bannerHeight="370"
textSize="14" textColor="" textAreaWidth="" textLineSpacing="0" textLetterSpacing="-0.5" textMarginLeft="12" textMarginBottom="3" transitionType="1" transitionDelayTimeFixed="8" transitionDelayTimePerWord=".5" transitionSpeed="8" transitionBlur="yes" transitionRandomizeOrder="no" showTimerClock="yes" showBackButton="yes" showNumberButtons="yes" showNumberButtonsAlways="Yes" showNumberButtonsHorizontal="yes" showNumberButtonsAscending="yes" autoPlay="yes"> [e:loop={0,5,3,1}] <item image="<?=$bqr['titlepic']?>" link="<?=$bqsr['titleurl']?>" textBlend="no"><![CDATA[]]></item> [/e:loop] </Banner>
7、第6点中的4点都做好后,点击提交。可以看到D:\EmpireServer\web\huandengpian\huandengpian012文件夹中,有“附件data.xml”和“data.xml”两个xml文件—第1个是原来重命名的,第2个是我们自己生成的。 到数据更新中刷新一下“自定义页面”,再用记事本打开data.xml,看到代码就可以确认了,如: <item image="/d/file/huandengpian/huandengpian011/2013-01-02/f6238a71d101a700bfce353962be3ce3.jpg" link="/huandengpian/huandengpian011/2013-01-02/90.html" textBlend="no"><![CDATA[]]></item> 很显然,这就是帝国的图片及链接。 (以后xml幻灯片做熟练了,这步可以直接省略了)
至此,flash+xml幻灯片的教程结束了。附截图。
==========================================================
上传以下图片:
|