幻灯片播放 HTC 组件

第一个版本写的时候已是近10年前，原以为不会再用到这个功能，没想到...

原版本用 VBS 写的，很冗长，现改为 JS，去除无用的功能，再做些优化。

岁月如流水呀...

<!--
*************************************************

	幻灯片播放组件
	http://www.zhangkai.net
	http://blog.csdn.net/Triumph
	QQ:1920703

*************************************************

用法：
	<img style="behavior: url(SwitchImg.htc);" 
		src="images/001.jpg" 
		imgs="images/00(2|3|4).jpg" 
		playdelay="5" 
		effectduration="2"
	/>

	或

	<style>
		.switchimg{behavior: url(SwitchImg.htc);}
	</style>
	<img class="switchimg" 
		src="images/001.jpg"
		imgs="images/00(2|3|4).jpg"
		playdelay="5" 
		effectduration="2"
	/>

说明：
	其中的 “SwitchImg.htc” 是本文件所保存的文件名。

*************************************************

属性：

	imgs 
		数据类型：字符串
		说明：
			要切换的图片地址列表。每个地址之间用“｜”（竖线）分隔。
			如图片地址列表中各图片的地址除文件名外都相同，此属性可以这样写：
			imgs = "相同的前缀(不同的名称1|不同的名称2|不同的名称3|...)相同的后缀"
			例如：imgs="images/001.jpg|images/002.jpg|images/003.jpg|images/004.jpg|images/005.jpg"
			就可以写成：imgs="images/00(1|2|3|4|5).jpg"

			注：图片的 src 属性所指的图片地址会添加到该列表的第一项，并会过滤掉列表中与它相同的地址。
			请务必设置 src 属性，因为 htc 文件只有 IE 能识别，在其它浏览器下只显示 src 所指定的图片。

	playdelay
		数据类型：数值
		说明：切换后的停留时间。单位：秒。
		默认值：5

	effectduration
		数据类型：数值
		说明：切换持续时间，即切换的速度。单位：秒。
		默认值：1

	effect
		数据类型：字符串
		说明：切换效果
		取值范围：
			"BlendTrans"    :渐变效果
			"Pixelate"     :马赛克渐变效果
			"Fade"      :淡入淡出效果
			"GradientWipe"   :滚动渐变效果
			"Stretch"     :拉伸(缩)变形效果
			"Wheel"      :风车叶轮旋转效果
			"RandomDissolve" :随机像素溶解效果
			"Spiral"      :矩形螺旋效果
			"Slide"       :图片交换效果
			"RadialWipe"    :放射状擦除效果
			
			"RevealTrans序号"、
			"RevealTrans_序号"、
			"RevealTrans(序号)"、
			"RevealTrans"	:	使用以下23种效果中指定序号的效果，无序号时随机使用
				-------------------------------------------------------------
				00	:	矩形收缩转换
				01	:	矩形扩张转换
				02	:	圆形收缩转换
				03	:	圆形扩张转换
				04	:	向上擦除
				05	:	向下擦除
				06	:	向右擦除
				07	:	向左擦除
				08	:	纵向百叶窗转换
				09	:	横向百叶窗转换
				10	:	国际象棋棋盘横向转换
				11	:	国际象棋棋盘纵向转换
				12	:	随机杂点干扰转换
				13	:	左右关门效果转换
				14	:	左右开门效果转换
				15	:	上下关门效果转换
				16	:	上下开门效果转换
				17	:	从右上角到左下角的锯齿边覆盖效果转换
				18	:	从右下角到左上角的锯齿边覆盖效果转换
				19	:	从左上角到右下角的锯齿边覆盖效果转换
				20	:	从左下角到右上角的锯齿边覆盖效果转换
				21	:	随机横线条转换
				22	:	随机竖线条转换
				-------------------------------------------------------------
		默认值：全部效果随机显示

*************************************************

-->
<public:component>
<public:attach event="ondocumentready" onevent="init()" />
<public:property name="imgs" />
<public:property name="playdelay" />
<public:property name="effectduration" />
<public:property name="effect" />

<script type="text/javascript">
	function init(){

		//-----------------------------------------------------------
		//检查图片地址，并组合成图片地址数组
		if (!element.imgs) return;

		var _urls = element.imgs.match(/([^(]*)\(([^)]*)\)(.*)/i),
			_arrImg = "",
			_urlPrefix = "",
			_urlSuffix = "";
		if (_urls.length == 1) {
			_arrImg = element.imgs.split("|");
		} else {
			_urlPrefix = _urls[1];
			_arrImg = _urls[2].split("|");
			_urlSuffix = _urls[3];
		}

		var _imgs = new Array(element.src);

		for (var i = 0; i < _arrImg.length; i++) {
            var _imgurl = _urlPrefix + _arrImg[i] + _urlSuffix;
			if(_arrImg[i] && element.src.indexOf(_imgurl)<0){//地址字符串有效，并且与 src 属性的地址不同
				_imgs.push(_imgurl);
			}
		}
		var _count = _imgs.length;
		if(_count==1){//如果只有一张图片则什么也不做
			return;
		}
		var _nextIndex = 1;//下一张图片在数组中的索引
		//-----------------------------------------------------------

		element.playdelay = element.playdelay || 5;  //停留时间（秒）
		element.effectduration = element.effectduration || 2;    //动画切换速度（秒）

		//-----------------------------------------------------------
		//切换效果
		var _effectnames = ["RevealTrans","BlendTrans","Pixelate","Fade","GradientWipe","Stretch","Wheel","RandomDissolve","Spiral","Slide","RadialWipe"];
		var _effectFilter = new Array;
		_effectFilter["RevealTrans"] = "RevealTrans(transition=";
		_effectFilter["BlendTrans"] = "BlendTrans(";
		_effectFilter["Pixelate"] = "progid:DXImageTransform.Microsoft.Pixelate(enabled=false,maxSquare=25";
		_effectFilter["Fade"] = "progid:DXImageTransform.Microsoft.Fade(overlap=0";
		_effectFilter["GradientWipe"] = "progid:DXImageTransform.Microsoft.GradientWipe(gradientSize=0.25,motion=forward";
		_effectFilter["Stretch"] = "progid:DXImageTransform.Microsoft.Stretch(stretchStyle=PUSH";
		_effectFilter["Wheel"] = "progid:DXImageTransform.Microsoft.Wheel(spokes=16";
		_effectFilter["RandomDissolve"] = "progid:DXImageTransform.Microsoft.RandomDissolve(";
		_effectFilter["Spiral"] = "progid:DXImageTransform.Microsoft.Spiral(gridSizeX=50,gridSizeY=50";
		_effectFilter["Slide"] = "progid:DXImageTransform.Microsoft.Slide(bands=1,slideStyle=SWAP";
		_effectFilter["RadialWipe"] = "progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=CLOCK";
		//-----------------------------------------------------------

		//-----------------------------------------------------------
		//下一张图片预载缓存，防止图片过大或网速慢时影响切换效果
		var _cacheImageLoadOver = false;
		var _cacheImage = document.createElement("img");
		element.parentElement.appendChild(_cacheImage);
		_cacheImage.style.display = "none";
		_cacheImage.src = _imgs[_nextIndex];
		_cacheImage.onload = function(){
			_cacheImageLoadOver = true;
		};
		//-----------------------------------------------------------

		window.setInterval(function(){
			if(!_cacheImageLoadOver){//如果缓存图片未加载完毕，则不切换
				return;
			}

			var _effect = element.effect || _effectnames[Math.floor(Math.random()*_effectnames.length)];	//默认切换效果
			
			if(_effect.search(/RevealTrans/i)>=0){
				var _numarr = _effect.match(/\d+/);
				var _num = _numarr ? _numarr[0] : 0;
				_num==0 ? _num = Math.floor(Math.random()*23) /*产生0-22的随机数*/: 0;
				element.style.filter = _effectFilter["RevealTrans"] + _num;
			}else{
				element.style.filter = _effectFilter[_effect];
			}

			element.style.filter += " duration=" + element.effectduration + ")";

			element.filters(0).apply();
			element.src = _imgs[_nextIndex];
			element.filters(0).play();
			_nextIndex = ++_nextIndex % _count;
			_cacheImage.src = _imgs[_nextIndex];
		}, element.playdelay * 1000);
	}
</script>

</public:component>