切换风格
开启辅助访问

Bcastr 4.0,优秀的通用图片轮换播放器

[复制链接]
作者:糊涂 
版块:
L7BZ论坛|资源 资料教程 发布时间:2015-11-7 08:44:45
3770
糊涂 发表于 2015-11-7 08:44:45 | 显示全部楼层 |阅读模式
特别提示:xml 是可以动态生成的,但是在生成的时候要着重考虑 bcastr4.swf 、bcastr.xml 以及 图片的路径关系,另外需要注意 flash新版本 是不能跨域的,flash里面的链接和图片都是不能跨域的,就是说你的xml里面的的图片和链接地址都要跟xml是属于一个域名的~~
网友冰淇淋小子建议:参数里面的图片和链接地址最好使用绝对路径。
我们在进行网页编程时,难免会遇到需要进行图片轮换的地方,在这里向大家推荐 Bcastr 4.0 ,一款优秀的通用图片轮换播放器。使用 Bcastr 4.0 可以轻松的制作如上面所示的图片轮换效果,它有如下的特点:
  • 可以读取xml设置播放列表,自定义xml地址
  • 可以将图片地址直接写网页中直接,不需要xml
  • 自动适应图片大小
  • 循环播放,自定义自动播放时间
  • 不限制图片数量
  • 自定义尺寸,自动适应任何比例,图片不变形
  • 自定义图片题目(可选)
  • 浏览过程中下载
  • 自定义图片连接(可选)
  • 自定界面色彩放案
插入代码
Bcastr 4.0提供直接写入参数和使用xml传递参数两种代码插入的办法:
1.直接写入参数

  1. <object type="application/x-shockwave-flash" data="http://xiaogui.org/files/bcastr/bcastr4.swf?xml=

  2.    <data>

  3.     <channel>

  4.      <item>

  5.       <link>http://xiaogui.org/visual-studio-2010-msdn-chinese-simplified-version.html</link>

  6.          <image>http://xiaogui.org/files/2010-05/home-hero-boxshot.jpg</image>

  7.          <title>Visual Studio 2010 MSDN中文版下载</title>

  8.         </item>

  9.         <item>

  10.          <link>http://xiaogui.org/province-city-area-selector.html</link>

  11.          <image>http://xiaogui.org/files/2010-05/province-city-area-selector.png</image>

  12.          <title>PCAS省、市、地区联动选择JS封装类</title>

  13.         </item>

  14.         <item>

  15.          <link>http://xiaogui.org/foxit-reader-3-3.html</link>

  16.          <image>http://xiaogui.org/files/2010-05/foxit-reader-3-3.png</image>

  17.          <title>福昕PDF阅读器(Foxit Reader)3.3 正式发布</title>

  18.         </item>

  19.         <item>

  20.          <link>http://xiaogui.org/visual-studio-2010-express-version.html</link>

  21.          <image>http://xiaogui.org/files/2010-06/sl_VSE2010.png</image>

  22.          <title>Visual Studio 2010 Express 版提供下载</title>

  23.         </item>

  24.         <item>

  25.          <link>http://xiaogui.org/expression-studio-4-release.html</link>

  26.          <image>http://xiaogui.org/files/2010-06/expression-studio-4-release.png</image>

  27.          <title>微软设计套装 Expression Studio 4 正式版发布</title>

  28.         </item>

  29.        </channel>

  30.    </data>

  31.   "  width="500" height="150">

  32.   <param name="movie" value="http://xiaogui.org/files/bcastr/bcastr4.swf?xml=

  33.    <data>

  34.         <channel>

  35.           <item>

  36.             <link>http://xiaogui.org/visual-studio-2010-msdn-chinese-simplified-version.html</link>

  37.             <image>http://xiaogui.org/files/2010-05/home-hero-boxshot.jpg</image>

  38.             <title>Visual Studio 2010 MSDN中文版下载</title>

  39.           </item>

  40.           <item>

  41.             <link>http://xiaogui.org/province-city-area-selector.html</link>

  42.             <image>http://xiaogui.org/files/2010-05/province-city-area-selector.png</image>

  43.             <title>PCAS省、市、地区联动选择JS封装类</title>

  44.           </item>

  45.           <item>

  46.             <link>http://xiaogui.org/foxit-reader-3-3.html</link>

  47.             <image>http://xiaogui.org/files/2010-05/foxit-reader-3-3.png</image>

  48.             <title>福昕PDF阅读器(Foxit Reader)3.3 正式发布</title>

  49.           </item>

  50.           <item>

  51.             <link>http://xiaogui.org/visual-studio-2010-express-version.html</link>

  52.             <image>http://xiaogui.org/files/2010-06/sl_VSE2010.png</image>

  53.             <title>Visual Studio 2010 Express 版提供下载</title>

  54.           </item>

  55.           <item>

  56.             <link>http://xiaogui.org/expression-studio-4-release.html</link>

  57.             <image>http://xiaogui.org/files/2010-06/expression-studio-4-release.png</image>

  58.             <title>微软设计套装 Expression Studio 4 正式版发布</title>

  59.           </item>

  60.         </channel>

  61.    </data>" />

  62. </object>
复制代码
2.使用xml传递参数

  1. <object id="bcastr4" data="http://xiaogui.org/files/bcastr/bcastr4.swf?xml=http://xiaogui.org/files/bcastr/bcastr.xml" type="application/x-shockwave-flash" width="500" height="150">

  2.         <param name="movie" value="http://xiaogui.org/files/bcastr/bcastr4.swf?xml=http://xiaogui.org/files/bcastr/bcastr.xml" />

  3. </object>
复制代码
xml文件内容:

  1. <?xml version="1.0" encoding="utf-8"?>

  2. <data>

  3. <channel>

  4.   <item>

  5.    <link>http://xiaogui.org/visual-studio-2010-msdn-chinese-simplified-version.html</link>

  6.    <image>http://xiaogui.org/files/2010-05/home-hero-boxshot.jpg</image>

  7.    <title>Visual Studio 2010 MSDN中文版下载</title>

  8.   </item>

  9.   <item>

  10.    <link>http://xiaogui.org/province-city-area-selector.html</link>

  11.    <image>http://xiaogui.org/files/2010-05/province-city-area-selector.png</image>

  12.    <title>PCAS省、市、地区联动选择JS封装类</title>

  13.   </item>

  14.   <item>

  15.    <link>http://xiaogui.org/foxit-reader-3-3.html</link>

  16.    <image>http://xiaogui.org/files/2010-05/foxit-reader-3-3.png</image>

  17.    <title>福昕PDF阅读器(Foxit Reader)3.3 正式发布</title>

  18.   </item>

  19.   <item>

  20.    <link>http://xiaogui.org/visual-studio-2010-express-version.html</link>

  21.    <image>http://xiaogui.org/files/2010-06/sl_VSE2010.png</image>

  22.    <title>Visual Studio 2010 Express 版提供下载</title>

  23.   </item>

  24.   <item>

  25.    <link>http://xiaogui.org/expression-studio-4-release.html</link>

  26.    <image>http://xiaogui.org/files/2010-06/expression-studio-4-release.png</image>

  27.    <title>微软设计套装 Expression Studio 4 正式版发布</title>

  28.   </item>

  29. </channel>

  30. <config>

  31.   <roundCorner>0</roundCorner>

  32.   <autoPlayTime>8</autoPlayTime>

  33.   <isHeightQuality>false</isHeightQuality>

  34.   <blendMode>normal</blendMode>

  35.   <transDuration>1</transDuration>

  36.   <windowOpen>_blank</windowOpen>

  37.   <btnSetMargin>auto 5 5 auto</btnSetMargin>

  38.   <btnDistance>20</btnDistance>

  39.   <titleBgColor>0xff6600</titleBgColor>

  40.   <titleTextColor>0xffffff</titleTextColor>

  41.   <titleBgAlpha>.75</titleBgAlpha>

  42.   <titleMoveDuration>1</titleMoveDuration>

  43.   <btnAlpha>.7</btnAlpha>

  44.   <btnTextColor>0xffffff</btnTextColor>

  45.   <btnDefaultColor>0x1B3433</btnDefaultColor>

  46.   <btnHoverColor>0xff9900</btnHoverColor>

  47.   <btnFocusColor>0xff6600</btnFocusColor>

  48.   <changImageMode>click</changImageMode>

  49.   <isShowBtn>true</isShowBtn>

  50.   <isShowTitle>true</isShowTitle>

  51.   <scaleMode>noBorder</scaleMode>

  52.   <transform>blur</transform>

  53.   <isShowAbout>true</isShowAbout>

  54.   <titleFont>微软雅黑</titleFont>

  55. </config>

  56. </data>
复制代码
参数说明
从上面的xml可以看出Bcastr 4.0 可以设置很多参数,下面就对这些参数和它的默认值进行简单的说明:
影片信息
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”
下载
您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

快速回复 返回顶部 返回列表