图片轮换播放器

插入代码

直接写入参数

1. <object type=“application/x-shockwave-flash” data=“bcastr4.swf?xml=
2.                         <data>
3.                                 <channel>
4.                                         <item>
5.                                                 <link>http://www.ruochi.com</link>
6.                                                 <image>images/image1.jpg</image>
7.                                                 <title>Bell Tower,Xi’an,China</title>
8.                                         </item>
9.                                         <item>
10.                                                 <link>http://www.ruochi.com</link>
11.                                                 <image>images/image2.jpg</image>
12.                                                 <title>Greater Wild Goose Pagoda,Xi’an,China</title>
13.                                         </item>
14.                                         <item>
15.                                                 <link>http://www.ruochi.com</link>
16.                                                 <image>images/image3.jpg</image>
17.                                                 <title>Terra Cotta Warriors,Xi’an,China</title>
18.                                         </item>
19.                                         <item>
20.                                                 <link>http://www.ruochi.com</link>
21.                                                 <image>images/image4.jpg</image>
22.                                                 <title>The Forest of Steles ,Xi’an,China</title>
23.                                         </item>
24.                                         <item>
25.                                                 <link>http://www.ruochi.com</link>
26.                                                 <image>images/image5.jpg</image>
27.                                                 <title>The Qian Tomb,Xi’an,China</title>
28.                                         </item>
29.                                 </channel>
30.                         </data>
31.                 "  width="650" height="500">
32.                 <param name=”movie” value=”bcastr4.swf?xml=
33.                         <data>
34.                                 <channel>
35.                                         <item>
36.                                                 <link>http://www.ruochi.com</link>
37.                                                 <image>images/image1.jpg</image>
38.                                                 <title>Bell Tower,Xi’an,China</title>
39.                                         </item>
40.                                         <item>
41.                                                 <link>http://www.ruochi.com</link>
42.                                                 <image>images/image2.jpg</image>
43.                                                 <title>Greater Wild Goose Pagoda,Xi’an,China</title>
44.                                         </item>
45.                                         <item>
46.                                                 <link>http://www.ruochi.com</link>
47.                                                 <image>images/image3.jpg</image>
48.                                                 <title>Terra Cotta Warriors,Xi’an,China</title>
49.                                         </item>
50.                                         <item>
51.                                                 <link>http://www.ruochi.com</link>
52.                                                 <image>images/image4.jpg</image>
53.                                                 <title>The Forest of Steles ,Xi’an,China</title>
54.                                         </item>
55.                                         <item>
56.                                                 <link>http://www.ruochi.com</link>
57.                                                 <image>images/image5.jpg</image>
58.                                                 <title>The Qian Tomb,Xi’an,China</title>
59.                                         </item>
60.                                 </channel>
61.                         </data>" />
62.         </object>

使用xml传递参数

 

1. <data>
2.         <channel>
3.                 <item>
4.                         <link>http://www.ruochi.com</link>
5.                         <image>images/image1.jpg</image>
6.                         <title>Bell Tower,Xi’an,China</title>
7.                 </item>
8.                 <item>
9.                         <link>http://www.ruochi.com</link>
10.                         <image>images/image2.jpg</image>
11.                         <title>Greater Wild Goose Pagoda,Xi’an,China</title>
12.                 </item>
13.                 <item>
14.                         <link>http://www.ruochi.com</link>
15.                         <image>images/image3.jpg</image>
16.                         <title>Terra Cotta Warriors,Xi’an,China</title>
17.                 </item>
18.                 <item>
19.                         <link>http://www.ruochi.com</link>
20.                         <image>images/image4.jpg</image>
21.                         <title>The Forest of Steles ,Xi’an,China</title>
22.                 </item>
23.                 <item>
24.                         <link>http://www.ruochi.com</link>
25.                         <image>images/image5.jpg</image>
26.                         <title>The Qian Tomb,Xi’an,China</title>
27.                 </item>
28.         </channel>
29.         <config>        
30.                 <roundCorner>0</roundCorner>
31.                 <autoPlayTime>8</autoPlayTime>
32.                 <isHeightQuality>false</isHeightQuality>
33.                 <blendMode>normal</blendMode>
34.                 <transDuration>1</transDuration>
35.                 <windowOpen>_self</windowOpen>
36.                 <btnSetMargin>auto 5 5 auto</btnSetMargin>
37.                 <btnDistance>20</btnDistance>
38.                 <titleBgColor>0xff6600</titleBgColor>
40.                 <titleBgAlpha>.75</titleBgAlpha>
41.                 <titleMoveDuration>1</titleMoveDuration>
42.                 <btnAlpha>.7</btnAlpha>  
43.                 <btnDefaultColor>0xB3433</btnDefaultColor>
44.                 <btnHoverColor>0xff9900</btnHoverColor>
45.                 <btnFocusColor>0xff6600</btnFocusColor>
46.                 <changImageMode>click</changImageMode>
47.                 <isShowBtn>true</isShowBtn>
48.                 <isShowTitle>true</isShowTitle>
49.                 <scaleMode>noBorder</scaleMode>
50.                 <transform>blur</transform>
51.                 <isShowAbout>true</isShowAbout>
52.         </config>
53. </data>

 

以下用”.”描述xml树结构并说明参数作用

影片信息

channel.item

图片信息，可以设置多张图片

channel.itme.image

图片地址参数，此参数是唯一必须要有的参数，其他参数都有默认参数

channel.itme.link

对应图片的连接

channel.itme.tilte

对应图片的标题

设置

config.roundCorner

图片的圆角

config.autoPlayTime

图片切换时间，默认值是8，单位秒

config.isHeightQuality

图片缩小是否采用高质量的方法，默认值false

config.normal

图片的混合模式

config.transDuration

图片在切换过程中的时间，默认值1，单位秒

config.windowOpen

图片连接的打开方式，默认值”_blank”,在新窗口打开，也可以使用”_self”,使用本窗口打开

config.btnSetMargin

按钮的位置，文字的位置，用了css的margin概念，默认值”auto 5 5 auto”，四个数值代表 上 右 下 左 相对于播放器的距离，四个数值用空格分开，不需具体数值用”auto”填写 ，比如左上对齐并都有10像素的距离可以写 “10 auto auto 10″, 右下角对齐是”auto 10 10 auto”

.config.btnDistance

每个按钮的距离，默认值20

.config.titleBgColor

标题背景的颜色，默认0xff6600

.config.titleTextColor

标题文字的颜色，默认0xffffff

.config.titleBgAlpha

标题背景的透明度，默认0.75

.config.titleFont

标题文字的字体，默认值”微软雅黑”

.config.titleMoveDuration

标题背景动画的时间，默认值1，单位秒

.config.btnAlpha

按钮的透明度，默认值0.7

.config.btnTextColor

按钮文字的颜色，默认值0xffffff

.config.btnDefaultColor

按钮的默认颜色，默认值0×1B3433

.config.btnHoverColor

按钮的默认颜色，默认值0xff9900

.config.btnFocusColor

按钮当前颜色，默认值0xff6600

.config.changImageMode

切换图片的方法，默认值”click”,点击切换图片，还可以使用”hover”,鼠标悬停就切换图片

.config.isShowBtn

是否显示按钮，默认值”true”

.config.isShowTitle

是否显示标题，默认值”true”

.config.scaleMode

图片放缩模式: 默认值是”noBorder”
“showAll”: 可以看到全部图片,保持比例,可能上下或者左右
“exactFil”: 放缩图片到舞台的尺寸,可能比例失调
“noScale”: 图片的原始尺寸,无放缩
“noBorder”: 图片充满播放器,保持比例,可能会被裁剪

.config.transform

图片放缩模式: 默认值是”alpha”
“alpha”: 透明度淡入淡出
“blur”: 模糊淡入淡出
“left”: 左方图片滚动
“right”: 右方图片滚动
“top”: 上方图片滚动
“bottom”: 下方图片滚动
“breathe”: 有一点点地放缩的淡入淡出
“breatheBlur”: 有一点点地放缩的模糊淡入淡出，本页的例子就是这个

.config.isShowAbout

是否显示关于信息，默认值”true”

源网址 http://www.ruochi.com/main/2008/03/19/bcastr-40/