JS超強幻燈片效果代碼

因為我發現将VBS用在網頁中時, 如果再調用JS代碼會出現莫名其妙的錯誤,但是網頁中全用JS代碼後就不出現錯誤了,是以把網友的VBS改成了JS.

slide.js源代碼:

  //超強幻燈片效果

  var temp_arr1 = navigator.appVersion.split(";")

  var temp_arr2 = temp_arr1[1].split(" ")

  var CanPlay = (  temp_arr2[2] > 5 )

  var FilterStr = "RevealTrans(duration=2,transition=23)"

  FilterStr = FilterStr + ";BlendTrans(duration=2)"

  if (CanPlay)

{

    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Pixelate(,enabled=false,duration=2,maxSquare=25)"

    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0)"

    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.GradientWipe(duration=2,gradientSize=0.25,motion=forward )"

    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Stretch(duration=2,stretchStyle=PUSH)"

    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Wheel(duration=2,spokes=16)"

    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.RandomDissolve(duration=2)"

    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Spiral(duration=2,gridSizeX=50,gridSizeY=50)"

    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Slide(duration=2,bands=1,slideStyle=SWAP)"

    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.RadialWipe(duration=2,wipeStyle=CLOCK)"

  }

  else

    alert("幻燈片圖檔切換效果需要浏覽器為IE5.5或以上版本，否則将隻能看到部分的切換效果。")

  var FilterArr = FilterStr.split(";")

  var PlayImg_M = 5 * 1000  //切換時間（毫秒）

  var I = 1

  function ChangeImg(FileListArr)

    while(FileListArr[I]=="")

      I = I + 1

      if (I >= FileListArr.length) I = 0;

    }

    var J

    if (I >= FileListArr.length) I = 0;

    //Randomize //随機數

    J = Math.round( Math.random() * 100 ) % FilterArr.length

    Img.style.filter = FilterArr[J]

    Img.filters(0).apply()

    Img.src = FileListArr[I]

    Img.filters(0).play()

    I = I + 1

    TempImg.src = FileListArr[I]

    window.setTimeout("ChangeImg(FileListArr)",PlayImg_M)

  //'''''''''''''''''''''''''''''''''''''''''

  function ShowImg(FileList)

      FileListArr = FileList.split(",")

      NoScript.style.display = "none"

      CanRunScript.style.display = ""

      Img.src = FileListArr[0]

      Img.style.width = "990"

      Img.style.height = "100"

      window.setTimeout("ChangeImg(FileListArr)", PlayImg_M)

在網頁中調用的代碼:

<!--在網頁中調用js幻燈片效果-->

<table width="990px" align="center" border="0px" cellpadding="0px" cellspacing="0px">

  <tr id="NoScript">

    <td align="center" style="color:white">對不起，您的浏覽器禁止腳本運作，無法正常顯示圖檔。</td>

  </tr>

  <tr style="display:none" id="CanRunScript">

    <td height="100%" align="center" valign="middle">

      <img ID="Img" border="0" >

    </td>

  <tr style="display:none">

    <TD><Img ID="TempImg" Border="0"></TD>

  </tr>  

</table>

<script type="text/javascript" src="../js/slide.js"></script>

<script language="javascript">

    FileList = "../images/top_banner_1.jpg";

    FileList = FileList + ",../images/top_banner_2.jpg";//多張圖檔用逗号隔開

    ShowImg(FileList);

</script>