习之发表过两篇博客,介绍用现成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=) 关键是顺序要和照片一一对应,照片多少张说明词就多少条;
替换好了以后,将所有的源代码粘贴到老小孩博客编辑的“源码”框里,就可以了。
|