超强幻灯片播放 HTC (VBS)

 

 

此文章大家自己研究一下，因为本人也是从别人那里拷贝的，有待于验证。

 

 

《超强幻灯片播放脚本（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

                             [e-mail]

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

属性：

 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）》中各图片之间使用“,”逗号分隔，在此版中改为使用“|”竖线分隔。这是因为操作系统允许在文件名中使用逗号和分号，如果图片路径中出现逗号时就无法显示。所以改为竖线。竖线不允许出现在文件夹名或文件名中。