《超强幻灯片播放脚本(VBS)》是在2003年11月完成的,当时是我自己网站上图片浏览的一个附加功能。在CSDN发表后被很多网站转载。如今已经过去两年了,再看看这段代码觉得还是挺实用的。不过缺点也不少,最主要是使用不太方便。为此又重新将其编写成HTC组件,这样使用就更方便了。另外加入了几个可控制的属性,详情请查看注释中的属性说明。如有问题请留言或发邮件。
(2005-10-24 10:10)修改
在程序中添加缓存图片加载完毕标志变量,以保证在缓存图片加载完毕后才进行切换。目的是解决在图片较大或网速较慢时,缓存的图片来不及加载,也会影响切换效果的问题。
(2005-10-20 14:30)修改
在图片加载时动态创建一个隐藏的图片对象,它的地址始终是下一张要显示的图片。这样的目的是为了让浏览器将下一张图片提前加载,以避免影响切换效果,起到图片缓存的作用。
(2005-10-13 11:00)修改
修正一些BUG
将22种切换效果集合分散,单独列出
(2005-10-12 16:30)修改:
添加了“AutoPlay”属性,定义是否在图片加载时就开始播放
添加了“StartPlay”方法,开始播放
添加了“StopPlay”方法,停止播放
以下为 HTC 文件代码:
<!--
*************************************************
幻灯片播放HTC组件
夜雨休闲 By 2005-10
*************************************************
属性:
ImgFileList
说明:图像文件列表。每个图像之间用“|”(竖线)分隔
数据类型:String
PlayDelay
说明:播放延迟时间。单位:秒。
数据类型:Integer
默认值:5
Effect
说明:切换效果
数据类型:String
取值范围:
"RevealTrans_0" : 矩形收缩转换
"RevealTrans_1" : 矩形扩张转换
"RevealTrans_2" : 圆形收缩转换
"RevealTrans_3" : 圆形扩张转换
"RevealTrans_4" : 向上擦除
"RevealTrans_5" : 向下擦除
"RevealTrans_6" : 向右擦除
"RevealTrans_7" : 向左擦除
"RevealTrans_8" : 纵向百叶窗转换
"RevealTrans_9" : 横向百叶窗转换
"RevealTrans_10" : 国际象棋棋盘横向转换
"RevealTrans_11" : 国际象棋棋盘纵向转换
"RevealTrans_12" : 随机杂点干扰转换
"RevealTrans_13" : 左右关门效果转换
"RevealTrans_14" : 左右开门效果转换
"RevealTrans_15" : 上下关门效果转换
"RevealTrans_16" : 上下开门效果转换
"RevealTrans_17" : 从右上角到左下角的锯齿边覆盖效果转换
"RevealTrans_18" : 从右下角到左上角的锯齿边覆盖效果转换
"RevealTrans_19" : 从左上角到右下角的锯齿边覆盖效果转换
"RevealTrans_20" : 从左下角到右上角的锯齿边覆盖效果转换
"RevealTrans_21" : 随机横线条转换
"RevealTrans_22" : 随机竖线条转换
"BlendTrans" :渐变效果
"Pixelate" :马赛克渐变效果
"Fade" :淡入淡出效果
"GradientWipe" :滚动渐变效果
"Stretch" :拉伸(缩)变形效果
"Wheel" :风车叶轮旋转效果
"RandomDissolve" :随机像素溶解效果
"Spiral" :矩形螺旋效果
"Slide" :图片交换效果
"RadialWipe" :放射状擦除效果
默认值:全部效果随机显示
EffectDuration
说明:切换持续时间。单位:秒。
数据类型:Currency
数据有效范围:0-10 取值为0则不需要切换效果
默认值:1
AutoPlay
说明:图片显示时就开始播放
数据类型:Boolean
默认值:True
方法:
ChangeImg
说明:切换到下一张图片
StartPlay
说明:开始播放
StopPlay
说明:停止播放
*************************************************
-->
<PUBLIC:COMPONENT><PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="Init" />
<PUBLIC:METHOD NAME="ChangeImg"/>
<PUBLIC:METHOD NAME="StartPlay"/>
<PUBLIC:METHOD NAME="StopPlay"/>
<public:property name="ImgFileList" />
<public:property name="AutoPlay" />
<public:property name="PlayDelay" />
<public:property name="Effect" />
<public:property name="EffectDuration" />
<SCRIPT LANGUAGE="VBScript">
Dim FileListArr, FilterArr, CurrentImgIndex, oInterval, oImg, blnLoadOver
Sub Init
SetPar
With element
Set oImg = Document.createElement("IMG")
.parentElement.appendChild(oImg)
oImg.style.display = "none"
oImg.onload = GetRef("LoadOver")
blnLoadOver = False
CurrentImgIndex = 0
If .src = "" Then
.src = FileListArr(0)
CurrentImgIndex = 1
Do While FileListArr(CurrentImgIndex)=""
CurrentImgIndex = CurrentImgIndex + 1
If CurrentImgIndex > UBound(FileListArr) Then CurrentImgIndex = 0
Loop
Else
Dim I, blnNoFile, intImgFileCount
blnNoFile = True
intImgFileCount = UBound(FileListArr) + 1
For I = 0 To intImgFileCount - 1
If FileListArr(I) = .src Then
blnNoFile = False
Exit For
End If
Next
If blnNoFile Then
ReDim Preserve FileListArr(intImgFileCount)
FileListArr(intImgFileCount) = .src
End If
End If
oImg.src = FileListArr(CurrentImgIndex)
If IsNull(.AutoPlay) Then
.AutoPlay = True
Else
.AutoPlay = UCase(.AutoPlay) = "TRUE"
End If
oInterval = -1
If .AutoPlay Then oInterval = window.setInterval("document.all." & .uniqueID & ".ChangeImg",.PlayDelay,"vbscript")
End With
End Sub
Sub SetPar
With element
If .EffectDuration="" Or Not IsNumeric(.EffectDuration) Then .EffectDuration = 1
.EffectDuration = CCur(.EffectDuration)
If .EffectDuration > 10 Or .EffectDuration < 0 Then .EffectDuration = 1
Dim Eff_RevealTrans_0, Eff_RevealTrans_1, Eff_RevealTrans_2, Eff_RevealTrans_3, Eff_RevealTrans_4, Eff_RevealTrans_5, Eff_RevealTrans_6, Eff_RevealTrans_7, Eff_RevealTrans_8, Eff_RevealTrans_9, Eff_RevealTrans_10
Dim Eff_RevealTrans_11,Eff_RevealTrans_12,Eff_RevealTrans_13,Eff_RevealTrans_14,Eff_RevealTrans_15,Eff_RevealTrans_16,Eff_RevealTrans_17,Eff_RevealTrans_18,Eff_RevealTrans_19,Eff_RevealTrans_20
Dim Eff_RevealTrans_21,Eff_RevealTrans_22, Eff_BlendTrans
Dim Eff_IE55_Pixelate, Eff_IE55_Fade, Eff_IE55_GradientWipe, Eff_IE55_Stretch, Eff_IE55_Wheel, Eff_IE55_RandomDissolve, Eff_IE55_Spiral, Eff_IE55_Slide, Eff_IE55_RadialWipe
Eff_RevealTrans_0 = "RevealTrans(duration=" & .EffectDuration & ",transition=0)"
Eff_RevealTrans_1 = "RevealTrans(duration=" & .EffectDuration & ",transition=1)"
Eff_RevealTrans_2 = "RevealTrans(duration=" & .EffectDuration & ",transition=2)"
Eff_RevealTrans_3 = "RevealTrans(duration=" & .EffectDuration & ",transition=3)"
Eff_RevealTrans_4 = "RevealTrans(duration=" & .EffectDuration & ",transition=4)"
Eff_RevealTrans_5 = "RevealTrans(duration=" & .EffectDuration & ",transition=5)"
Eff_RevealTrans_6 = "RevealTrans(duration=" & .EffectDuration & ",transition=6)"
Eff_RevealTrans_7 = "RevealTrans(duration=" & .EffectDuration & ",transition=7)"
Eff_RevealTrans_8 = "RevealTrans(duration=" & .EffectDuration & ",transition=8)"
Eff_RevealTrans_9 = "RevealTrans(duration=" & .EffectDuration & ",transition=9)"
Eff_RevealTrans_10 = "RevealTrans(duration=" & .EffectDuration & ",transition=10)"
Eff_RevealTrans_11 = "RevealTrans(duration=" & .EffectDuration & ",transition=11)"
Eff_RevealTrans_12 = "RevealTrans(duration=" & .EffectDuration & ",transition=12)"
Eff_RevealTrans_13 = "RevealTrans(duration=" & .EffectDuration & ",transition=13)"
Eff_RevealTrans_14 = "RevealTrans(duration=" & .EffectDuration & ",transition=14)"
Eff_RevealTrans_15 = "RevealTrans(duration=" & .EffectDuration & ",transition=15)"
Eff_RevealTrans_16 = "RevealTrans(duration=" & .EffectDuration & ",transition=16)"
Eff_RevealTrans_17 = "RevealTrans(duration=" & .EffectDuration & ",transition=17)"
Eff_RevealTrans_18 = "RevealTrans(duration=" & .EffectDuration & ",transition=18)"
Eff_RevealTrans_19 = "RevealTrans(duration=" & .EffectDuration & ",transition=19)"
Eff_RevealTrans_20 = "RevealTrans(duration=" & .EffectDuration & ",transition=20)"
Eff_RevealTrans_21 = "RevealTrans(duration=" & .EffectDuration & ",transition=21)"
Eff_RevealTrans_22 = "RevealTrans(duration=" & .EffectDuration & ",transition=22)"
Eff_BlendTrans = "BlendTrans(duration=" & .EffectDuration & ")"
Eff_IE55_Pixelate = "progid:DXImageTransform.Microsoft.Pixelate(,enabled=false,duration=" & .EffectDuration & ",maxSquare=25)"
Eff_IE55_Fade = "progid:DXImageTransform.Microsoft.Fade(duration=" & .EffectDuration & ",overlap=0)"
Eff_IE55_GradientWipe = "progid:DXImageTransform.Microsoft.GradientWipe(duration=" & .EffectDuration & ",gradientSize=0.25,motion=forward )"
Eff_IE55_Stretch = "progid:DXImageTransform.Microsoft.Stretch(duration=" & .EffectDuration & ",stretchStyle=PUSH)"
Eff_IE55_Wheel = "progid:DXImageTransform.Microsoft.Wheel(duration=" & .EffectDuration & ",spokes=16)"
Eff_IE55_RandomDissolve = "progid:DXImageTransform.Microsoft.RandomDissolve(duration=" & .EffectDuration & ")"
Eff_IE55_Spiral = "progid:DXImageTransform.Microsoft.Spiral(duration=" & .EffectDuration & ",gridSizeX=50,gridSizeY=50)"
Eff_IE55_Slide = "progid:DXImageTransform.Microsoft.Slide(duration=" & .EffectDuration & ",bands=1,slideStyle=SWAP)"
Eff_IE55_RadialWipe = "progid:DXImageTransform.Microsoft.RadialWipe(duration=" & .EffectDuration & ",wipeStyle=CLOCK)"
Dim CanPlay, FilterStr
CanPlay = CInt(Split(Split(navigator.appVersion,";")(1)," ")(2))>5
FilterStr = Eff_RevealTrans_0 + ";" + Eff_RevealTrans_1 + ";" + Eff_RevealTrans_2 + ";" + Eff_RevealTrans_3 + ";" + Eff_RevealTrans_4 + ";" + Eff_RevealTrans_5
FilterStr = FilterStr+ ";" + Eff_RevealTrans_6 + ";" + Eff_RevealTrans_7 + ";" + Eff_RevealTrans_8 + ";" + Eff_RevealTrans_9 + ";" + Eff_RevealTrans_10
FilterStr = FilterStr + ";" + Eff_RevealTrans_11 + ";" + Eff_RevealTrans_12 + ";" + Eff_RevealTrans_13 + ";" + Eff_RevealTrans_14 + ";" + Eff_RevealTrans_15
FilterStr = FilterStr + ";" + Eff_RevealTrans_16 + ";" + Eff_RevealTrans_17 + ";" + Eff_RevealTrans_18 + ";" + Eff_RevealTrans_19 + ";" + Eff_RevealTrans_20
FilterStr = FilterStr + ";" + Eff_RevealTrans_21 + ";" + Eff_RevealTrans_22
FilterStr = FilterStr + ";" + Eff_BlendTrans
If CanPlay Then
FilterStr = FilterStr + ";" + Eff_IE55_Pixelate + ";" + Eff_IE55_Fade + ";" + Eff_IE55_GradientWipe + ";" + Eff_IE55_Stretch + ";" + Eff_IE55_Wheel + ";" + Eff_IE55_RandomDissolve + ";" + Eff_IE55_Spiral + ";" + Eff_IE55_Slide + ";" + Eff_IE55_RadialWipe
End If
If .Effect<>"" Then
Select Case UCase(.Effect)
Case "REVEALTRANS_0"
FilterStr = Eff_RevealTrans_0
Case "REVEALTRANS_1"
FilterStr = Eff_RevealTrans_1
Case "REVEALTRANS_2"
FilterStr = Eff_RevealTrans_2
Case "REVEALTRANS_3"
FilterStr = Eff_RevealTrans_3
Case "REVEALTRANS_4"
FilterStr = Eff_RevealTrans_4
Case "REVEALTRANS_5"
FilterStr = Eff_RevealTrans_5
Case "REVEALTRANS_6"
FilterStr = Eff_RevealTrans_6
Case "REVEALTRANS_7"
FilterStr = Eff_RevealTrans_7
Case "REVEALTRANS_8"
FilterStr = Eff_RevealTrans_8
Case "REVEALTRANS_9"
FilterStr = Eff_RevealTrans_9
Case "REVEALTRANS_10"
FilterStr = Eff_RevealTrans_10
Case "REVEALTRANS_11"
FilterStr = Eff_RevealTrans_11
Case "REVEALTRANS_12"
FilterStr = Eff_RevealTrans_12
Case "REVEALTRANS_13"
FilterStr = Eff_RevealTrans_13
Case "REVEALTRANS_14"
FilterStr = Eff_RevealTrans_14
Case "REVEALTRANS_15"
FilterStr = Eff_RevealTrans_15
Case "REVEALTRANS_16"
FilterStr = Eff_RevealTrans_16
Case "REVEALTRANS_17"
FilterStr = Eff_RevealTrans_17
Case "REVEALTRANS_18"
FilterStr = Eff_RevealTrans_18
Case "REVEALTRANS_19"
FilterStr = Eff_RevealTrans_19
Case "REVEALTRANS_20"
FilterStr = Eff_RevealTrans_20
Case "REVEALTRANS_21"
FilterStr = Eff_RevealTrans_21
Case "REVEALTRANS_22"
FilterStr = Eff_RevealTrans_22
Case "BLENDTRANS"
FilterStr = EFF_BLENDTRANS
Case "PIXELATE"
FilterStr = EFF_IE55_PIXELATE
Case "FADE"
FilterStr = EFF_IE55_FADE
Case "GRADIENTWIPE"
FilterStr = EFF_IE55_GRADIENTWIPE
Case "STRETCH"
FilterStr = EFF_IE55_STRETCH
Case "WHEEL"
FilterStr = EFF_IE55_WHEEL
Case "RANDOMDISSOLVE"
FilterStr = EFF_IE55_RANDOMDISSOLVE
Case "SPIRAL"
FilterStr = EFF_IE55_SPIRAL
Case "SLIDE"
FilterStr = EFF_IE55_SLIDE
Case "RADIALWIPE"
FilterStr = Eff_IE55_RadialWipe
End Select
End If
FilterArr = Split(FilterStr,";")
If .PlayDelay="" Or Not IsNumeric(.PlayDelay) Then .PlayDelay = 5
.PlayDelay = CInt(.PlayDelay)
.PlayDelay = .PlayDelay * 1000
If IsNull(.ImgFileList) Then Exit Sub
FileListArr = Split(.ImgFileList,"|")
If UBound(FileListArr)=0 Then Exit Sub
End With
End Sub
Sub LoadOver
blnLoadOver = True
End Sub
Sub ChangeImg
If Not blnLoadOver Then Exit Sub
With element
Dim J
Randomize
J = Int(Rnd * (UBound(FilterArr)+1))
If .EffectDuration = 0 Then
.Src = FileListArr(CurrentImgIndex)
Else
.style.Filter = FilterArr(J)
.filters(0).Apply
.Src = FileListArr(CurrentImgIndex)
.filters(0).play
End If
CurrentImgIndex = CurrentImgIndex + 1
If CurrentImgIndex > UBound(FileListArr) Then CurrentImgIndex = 0
Do While FileListArr(CurrentImgIndex)=""
CurrentImgIndex = CurrentImgIndex + 1
If CurrentImgIndex > UBound(FileListArr) Then CurrentImgIndex = 0
Loop
blnLoadOver = False
oImg.src = FileListArr(CurrentImgIndex)
End With
End Sub
Sub StartPlay
With element
If oInterval=-1 Then
SetPar
oInterval = window.setInterval("document.all." & .uniqueID & ".ChangeImg",.PlayDelay,"vbscript")
End If
End With
End Sub
Sub StopPlay
window.clearInterval oInterval
oInterval = -1
End Sub
</SCRIPT>
</PUBLIC:COMPONENT>
如何使用:
将上面的代码保存成HTC文件,如“SwitchImg.htc”,在页面代码中使用:
<img
style="behavior: url(SwitchImg.htc);"
ImgFileList="1.jpg|2.jpg|3.jpg|4.jpg"
PlayDelay="5"
Effect="GradientWipe"
EffectDuration="1"
/>
- 如果省略某个属性则使用该属性的默认值。
- 可以不书写 IMG 的 src 属性。若无该属性,则页面加载时图片显示的是 ImgFileList 的第一张图片。如该属性有指定的图片时,程序会判断该图片是否同时存在于 ImgFileList 中,如不存在,则添加到 ImgFileList 中。
- 在《超强幻灯片播放脚本(VBS)》中各图片之间使用“,”逗号分隔,在此版中改为使用“|”竖线分隔。这是因为操作系统允许在文件名中使用逗号和分号,如果图片路径中出现逗号时就无法显示。所以改为竖线。竖线不允许出现在文件夹名或文件名中。
如何使用:
将上面的代码保存成HTC文件,如“SwitchImg.htc”,在页面代码中使用:
<img
style="behavior: url(SwitchImg.htc);"
ImgFileList="1.jpg|2.jpg|3.jpg|4.jpg"
PlayDelay="5"
Effect="GradientWipe"
EffectDuration="1"
/>
- 如果省略某个属性则使用该属性的默认值。
- 可以不书写 IMG 的 src 属性。若无该属性,则页面加载时图片显示的是 ImgFileList 的第一张图片。如该属性有指定的图片时,程序会判断该图片是否同时存在于 ImgFileList 中,如不存在,则添加到 ImgFileList 中。
- 在《超强幻灯片播放脚本(VBS)》中各图片之间使用“,”逗号分隔,在此版中改为使用“|”竖线分隔。这是因为操作系统允许在文件名中使用逗号和分号,如果图片路径中出现逗号时就无法显示。所以改为竖线。竖线不允许出现在文件夹名或文件名中。