JS超强幻灯片效果代码

根据网友<VBscript超强幻灯片效果代码>改写而来:).
因为我发现将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
    if (I >= FileListArr.length) I = 0;
    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>
  <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>

时间: 2024-07-30 00:10:39

JS超强幻灯片效果代码的相关文章

[转]VBscript超强幻灯片效果代码

FROM:http://www.yy-s.com/Article/wyzz/sjjs/200504/1844.html <HTML>  <HEAD>    <TITLE>幻灯片播放</TITLE>    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">    <LINK HREF="Images/Styl

js淡入淡出焦点图幻灯片效果代码分享_javascript技巧

本文实例讲述了javascript淡入淡出焦点图幻灯片效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的淡入淡出焦点图幻灯片效果代码,可以自定义标题,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js淡入淡出焦点图幻灯片效果代码如下 <head> <meta http-equiv="Content-Ty

js 图片切换效果代码

<html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js 图片切换效果代码</title> <script language="javascript教程&quo

js图片幻灯片效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html;

js实现幻灯片效果(基于jquery插件)_javascript技巧

使用jquery插件jquery.smallslider.js也能实现幻灯片效果. htm代码如下: 复制代码 代码如下: <div id="flashbox" class="smallslider"> <ul style="position: absolute; top: 0px; width: 3225px;"> <li class="" style="float: left;&qu

基于jquery 从左向右切换幻灯片效果代码

从左向右幻灯片切换有点一像看书一样的效果,很多商城是用这种,我们先来看看效果图片. 我们切换一下效果如下 不错吧,下面来分析实现代码. jquery代码(jquery文件大家可以到官网去下载,这里不提供)  代码如下 复制代码 <script type="text/javascript" src="/jquery-1.4.min.js"></script> <script type="text/javascript"

使用 JavaScript 创建可维护的幻灯片效果代码第1/3页_javascript技巧

第一步:分析问题(Analizing the problem) 创建一个好的脚本,第一步应该是去分析哪些是你要完成的:我们想要创建一个照片的幻灯片效果,并且我们想要保持维护的方便. 如何创建一个幻灯片效果 在一个网站上拥有幻灯片有几种方法: 在文档中包含所有的图片.  当他运行在无 JavaScript 状态,这是一个安全的选择.而且,当页面被载完,所有的图片也会将被载完.然而,这个方式只适用于少量的图片.  在文档中包含第一张图片,并且有一个创建幻灯片功能的服务器端脚本.  这也是相当安全的,

基于jquery图片幻灯片效果代码

先来看看效果图片 代码如下,jquery文件大家可以到http://down.111cn.net去下载,这里就不给出来了  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

Javascript 自动播放幻灯片效果代码

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu