实现图片轮播的方式有很多种,有直接HTML的,有JS的,还有FLASH的。
我比较喜欢FLASH的,因为它比较好的实现了功能的封装,只需要在界面上放一个<embed>标签就能解决问题。
我在这里介绍的是一款国人开发的Flash轮播插件:bcastr,其最新版本是4.0bate,全部配置由xml实现。
首先在目录下建一个文件夹,放置你准备轮播的图片:image
然后开始写Xml配置文件:文件名为:bcastr.xml
<?xml version="1.0" encoding="utf-8"?> <data> <channel> <item> <link>http://www.ruochi.com</link> <image>images/image1.jpg</image> <title>Bell Tower,Xi'an,China</title> </item> <item> <link>http://www.ruochigroup.com</link> <image>images/image2.jpg</image> <title>Greater Wild Goose Pagoda,Xi'an,China</title> </item> <item> <link>http://www.ruochi.com</link> <image>images/image3.jpg</image> <title>Terra Cotta Warriors,Xi'an,China</title> </item> <item> <link>http://www.ruochigroup.com</link> <image>images/image4.jpg</image> <title>The Forest of Steles ,Xi'an,China</title> </item> <item> <link>http://www.ruochi.com</link> <image>images/image5.jpg</image> <title>The Qian Tomb,Xi'an,China</title> </item> </channel> <config> <roundCorner>0</roundCorner> <autoPlayTime>8</autoPlayTime> <isHeightQuality>false</isHeightQuality> <blendMode>normal</blendMode> <transDuration>1</transDuration> <windowOpen>_self</windowOpen> <btnSetMargin>auto 5 5 auto</btnSetMargin> <btnDistance>20</btnDistance> <titleBgColor>0xff6600</titleBgColor> <titleTextColor>0xffffff</titleTextColor> <titleBgAlpha>.75</titleBgAlpha> <titleMoveDuration>1</titleMoveDuration> <btnAlpha>.7</btnAlpha> <btnTextColor>0xffffff</btnTextColor> <btnDefaultColor>0x1B3433</btnDefaultColor> <btnHoverColor>0xff9900</btnHoverColor> <btnFocusColor>0xff6600</btnFocusColor> <changImageMode>click</changImageMode> <isShowBtn>true</isShowBtn> <isShowTitle>true</isShowTitle> <scaleMode>noBorder</scaleMode> <transform>blur</transform> <isShowAbout>true</isShowAbout> <titleFont>微软雅黑</titleFont> </config> </data>
以上各种配置用处请参见帮助文档。
最后只需要在HTML中插入bcastr4.swf,它便会自动录找配置文件并读出配置了
<embed src="bcastr4.swf"></embed>
下载:bcastr4
http://ljzforever.qupan.com/?folder=950894
考参的文章:
Bcastr 4.0 Beta - flash image silde show 图片轮换播放 (开源 Open Source)
http://www.ruochi.com/main/2008/03/19/bcastr-40/