习之 的个人主页 注册

【原创】幻灯片播放器(三)

导语:

修改
字体调整: | |

发表于2008年08月22号 12点 阅读 6902 评论11 点赞6 ©著作权归作者所有

很多网站都用一种“导航FLASH”,也称“焦点播放器”,外形几乎相同,播放的照片不同而已。一般放3∼5张照片,是网页新闻的焦点,起导航链接作用。它的本质是个swf文件,但它留有供用户调整尺寸、置换照片的余地。我不懂这种“flash”的构造,但是只要能改尺寸,换照片,就能将它拿来做为幻灯片播放器用。因为不涉及到JS代码,它比上两款更简单。

下面是该播放器的实例,这个播放器的样子大家一定眼熟能详。可以看到,它有文字的解释,也有图片的编号,每个图片还有个链接,已具备了幻灯播放器的基本功能。因为文字说明及编号的字体、颜色、大小、对齐方式等不能调整。因此它播放的幻灯片尺寸不能太大,也不能太小。本例照片宽450,解说词和编号的文字大小已经显得有些不匹配了。

播放的内容是我国体操队在北京奥运会上取得的11枚金牌。

它的源代码其实很简单,就是一个嵌入式的媒体播放器,用的是 embed 标签。作为定位,在外面套了个 div 标签,读者也可以改成 table 等标签。现在重点介绍 embed 标签内的尺寸属性和照片地址更换等要点。

要修改替换的有四个部分。

一:图片地址:写在flashvars="pics=的等号后面,两个照片地址中间用“|”符号隔开,要增加照片就加个地址,与前一个地址之间也要加“|”符号。最后的一个照片地址后面不能加这个符号。

二:链接地址:写在&links=的等号后面写法同上。 如果不作为“导航”用,本例没有写这些照片的链接地址,只是保留了可以加入的位置。

三:解说词:写在&texts=的等号后面,方法同上,要注意的是每个解说词中间也有“|”,但不要有多余的空格,也不要主动的分行,那会理解成解说词里包含的空格。如不要解说词,可将下面的“文字栏”高度设置成0。

四:显示面积的确定:这是要特别注意的。在代码里有两处设置宽和高(不包括 div 里的设置),要统一。从最后的一处改起。

第一,是在文字解说词后:

&borderwidth=450&borderheight=300&textheight=24

这是:照片的宽度450,高度300,文字栏的高度24

第二处,是 emded 标签必须设置的Flash的宽和高:

width="450" height="324"

注意:这高度324是照片的显示高度加上文字栏高度(300+24=324)。宽度相同 。

 

这个播放器代码特别简单,但修改特别麻烦。不掌握修改的要领往往得不到预想的效果。

特别要注意的是:

  1. 在“|”的前后不要多加空格。在下面的代码里,看上去它似乎在每个地址的前面,那是为了使照片地址直观,另起了一行的关系,其实它在两个地址之间。对于初次做,最好是将flashvars后面的一个双引号内的所有内容一行到底,将所有的地址、文字 及“|”都连在一起,中间不加空格不打回车键。

  2. 每个照片地址和链接地址两边都没有双引号。

  3. 照片的数量、链接地址的数量及解说词的数量必须相等。

  4. 这个幻灯片能显示照片号码,但只能显示一位,因此只显示到9,大于9的不显示,不过照片照放,上面的实例就有11张照片。

  5. 关于照片的比例,按自己需要,在宽度和高度的设置里调整。一套照片,只要比例相同,大小不论。

 

下面是供拷贝的源代码。将红色的“音乐地址”置换成需要的mp3音乐地址即可。  

<p style="margin: 10px; text-align: center">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer"
width="450" height="324" quality="high"
menu="false" wmode="opaque" style="border:solid 1px #800080"
src="http://www.oldkids.cn/uploads/diary/200805/03170722509.swf"
id="下面是要替换的照片地址及解释词"
flashvars="pics=http://www.oldkids.cn/uploads/diary/200808/21214446676.jpg
|http://www.oldkids.cn/uploads/diary/200808/21214642373.jpg
|http://www.oldkids.cn/uploads/diary/200808/21214747995.jpg
|http://www.oldkids.cn/uploads/diary/200808/21214901428.jpg
|http://www.oldkids.cn/uploads/diary/200808/21214959669.jpg
&links=
&texts=第10金 体操男子团体
|第14金 体操女子团体
|第20金 男子体操全能--杨 威
|第31金 男子自由体操--邹 凯
|第32金 男子鞍马--肖 钦
|第36金 男子吊环--陈一冰
&borderwidth=450&borderheight=300&textheight=24"
alt="上面是幻灯片基本数据:宽450;高300;解说词区域高24"
allowscriptaccess="sameDomain">
</embed>
</p>
 

补充使用说明:

老小孩网站的朋友,在用这代码播放器前,事先要将自己电脑里的照片上传到老小孩网站,以得到照片的网络地址。当然外站的能链接的照片地址也行。然后打开博客的“写日记”,点击编辑框上的工具里的“源代码”,进入代码编辑状态,将下面的代码拷贝到编辑框里,修改显示宽度和高度,并替换照片的地址。都做好后,再点“源代码”回到文本编辑状态。这时,能看到大F的FLASH标识。点击编辑工具“预览”,才能看到照片切换的效果。

 

 

 

 

 

(注:您的设备不支持flash)

声明:以上内容仅用户个人行为,不代表本站(老小孩社区)观点,如有侵权或其他行为用户自己承担相关责任与本站无关。【举报文章】
点赞6 收藏 3 推送到圈子 分享
微信扫二维码分享

等6人点赞

本文作者

加好友
评论字体大小调节: | |

精选留言

您需要登录后才能回复

登录立即注册

请选择你想添加的收藏夹

新建收藏夹

收藏夹名称

©2017 老小孩网站版权所有 | 沪ICP备08012383号    举报电话:021-64323922
×
×