习之 的个人主页 注册

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

导语:

修改
字体调整: | |

发表于2011年08月05号 11点 阅读 10364 评论64 点赞9 ©著作权归作者所有

幻灯片播放器(五)

示例幻灯:

2011年上海世界游泳锦标赛中国军团的部分获奖项目

 

习之发表过两篇博客,介绍用现成Flash做的幻灯片播放器。一篇在北京奥运会期间,一篇是上海世博会期间,用了两个不同的Flash。因为近来老小孩网在维修,这两篇博客的Flash和图片都看不到,因此这里再介绍一个,是搜狐体育2011上海世游赛专版的Flash。

网上这种可以替换图片地址的Flash有不少。它是用作网页的焦点图(focus),鼠标点击图片能打开一个新的网页(新闻焦点),起到导航作用。每张图片有三个要素:图片、文字说明词、导航链接。它的优点是只要在代码里调换这三个要素,不必重新制作成新的Flash,就可以显示新的焦点图。习之将这个Flash的代码和参数挖出来,用做幻灯片的播放器。

上两篇文章介绍的替换方法是提供一个显示Flash的HTML代码,并列出Flash的参数(FlashVars),按要求替换和拼接这些参数,制成新的播放器HTML文件。制作的过程中,由于用的照片比较多,替换地址及拼合参数时容易出错,严重时会造成替换失败。因此这次换一个方法:习之写了个JS程序,只要替换程序里的照片地址、说明词、链接地址及幻灯片的尺寸等,就完工。需要替换的要素在代码里很直观,一组一组分开置放,容易替换。至于FlashVars的拼接、HTML代码的生成,由JS程序自动完成。

2021年修改重发说明:

由于老小孩网的博客板块多次改版,并于2016年始关闭了JS功能,本文的JS也失效了。现在又回到了老办法,用替换Flash代码里Flashvars的一样的方法,显示这个幻灯片播放器。替换方法可以参照“幻灯片播放器(三)和(四)的介绍。

 

幻灯片播放器(五)的源代码:为使代码简短,只放了五张图片,也删去了导航链接的地址(只保留了链接地址的位置&l=),可以按需增减。代码中“border: 3px solid #cc0000”是播放器外面的红色边框,可以修改宽度(现3px)和颜色(现红色#CC0000)。

 

 

<!--幻灯片代码开始-->
<embed width="480" height="300" src="http://img3.oldkids.cn/upload/12000/u11139/2011/08/06/blog_201108061501536.swf" wmode="transparent" quality="high" FlashVars="speed=5000&p=http://img3.oldkids.cn/upload/12000/u11139/2011/08/03/blog_201108031414074.jpg
|http://img2.oldkids.cn/upload/12000/u11139/2011/08/03/blog_201108031414098.jpg
|http://img4.oldkids.cn/upload/12000/u11139/2011/08/03/blog_201108031414111.jpg
|http://img1.oldkids.cn/upload/12000/u11139/2011/08/03/blog_201108031414130.jpg
|http://img3.oldkids.cn/upload/12000/u11139/2011/08/03/blog_201108031414150.jpg
&icon=孙杨打破男子1500米自由泳世界记录
|孙杨获得男子800米、1500米两项自由泳冠军
|叶诗文夺得女子200米混合泳冠军
|赵菁获得女子100米仰泳5冠军
|女子200米蝶泳焦刘洋获得金牌,刘子歌获得铜牌
&l="
type="application/x-shockwave-flash" quality="high"
style="border: 3px solid #cc0000" ></embed>

 

为了容易查找要替换的内容,在代码里加了一些中文说明。需要替换的只是:

幻灯片参数 

宽度 现在是480px

高度 现在是300px

转换时间(speed=5000) 现在是5秒

图片地址(&p=) 现在有5个地址,自由增减,幻灯片上的片号数字以此为准;

链接地址(&l=) 如果不需要链接,就让它空着,保留引号。

说明词(&icon=) 关键是顺序要和照片一一对应,照片多少张说明词就多少条;

替换好了以后,将所有的源代码粘贴到老小孩博客编辑的“源码”框里,就可以了。

 

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

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

等9人点赞

本文作者

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

精选留言

您需要登录后才能回复

登录立即注册

请选择你想添加的收藏夹

新建收藏夹

收藏夹名称

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