// JavaScript Document// JavaScript Document/**
 * =========================================================================
 * 本程式可自由复制、修改、传播,不得删除以下信息。如用于商业用途须经原作者同意方可使用。
 * =========================================================================
 * 程式名称:ForceWindow(@iClass.JS)
 * 描  述:网页上的图片幻灯片。
 * 版  本:1.0.0
 * 创建时间:2005年4月23日
 * 修改时间:2005年4月23日
 * 作  者:钟钟
 * 邮箱地址:[email protected]
 * 版权声明:本程式属于iClass.JS,版权归作者所有。
 * 讨论地址:http://www.iecn.net/forum/showthread.php?threadid=16975
 * 有关iClass计划详见:http://www.iecn.net/forum/showthread.php?threadid=14811
 * =========================================================================
 */
 //构造ImageSlide类
function ImageSlide () {
 if((/MSIE\s*[5-9]/).test(navigator.appVersion)) {
  this.count = 0;
  this.timer = null;
  this.first = new Object();
  this.frms = new Array();  this.imgs = new Array();
  this.width = 640;
  this.height = 480;
  this.boxId = "imageSlideBox";
  this.delay = 5;
  this.autoPlay = true;
  this.transform = 23;
  /**
   * 播放转换效果说明
   * --------------
   *  0. 矩形缩小
   *  1. 矩形扩大
   *  2. 圆形缩小
   *  3. 圆形扩大
   *  4. 从下到上
   *  5. 从上到下
   *  6. 从左到右
   *  7. 从右到左
   *  8. 竖百叶窗
   *  9. 横百叶窗
   * 10. 错位横百叶窗
   * 11. 错位竖百叶窗
   * 12. 点扩散
   * 13. 两边到中间
   * 14. 中间到两边
   * 15. 中间到上下
   * 16. 上下到中间
   * 17. 右下到左上
   * 18. 右上到左下
   * 19. 左上到右下
   * 20. 左下到右上
   * 21. 横条
   * 22. 竖条
   * 23. 随机
   * --------------
   */
 }
 else {
  alert("请使用IE5或IE5以上版本的浏览器使用本程式!");
 }
}//加入一张或多张图片(传入一个或多个图片路径)
//pushImg(sPath1 [, sPath2 [, sPath3 [, ...]]])
ImageSlide.prototype.pushImgs = function () {
 for (var i = 0; i < arguments.length; i++)
  this.imgs.push(arguments[i]);
}//设置图片播放容器的长宽
ImageSlide.prototype.setSize = function (nWidth, nHeight) {
 this.width = nWidth;
 this.height = nHeight;
}//设置图片播放容器的ID
ImageSlide.prototype.setBoxId = function (sBoxId) {
 this.boxId = sBoxId;
}//设置是否自动播放
ImageSlide.prototype.setAutoPlay = function (bAutoPlay) {
 this.autoPlay = bAutoPlay;
}//设置自动播放的延时秒数
ImageSlide.prototype.setDelay = function (nSeconds) {
 this.delay = nSeconds;
}//设置播放的转换效果(0-23的整数)
ImageSlide.prototype.setTransform = function (nTransform) {
 this.transform = nTransform;
}//显示
ImageSlide.prototype.display = function () {
 var boxStr = "<div style=’width:" + this.width + "px;height:" + this.height + "px;’ ";
 boxStr += "id=’"  + this.boxId + "’><div ";
 if (this.autoPlay)
  boxStr += "onclick=’window.imageSlide.play();window.imageSlide.timerPlay();’";
 else
  boxStr += "onclick=’window.imageSlide.play();’";
 boxStr += "style=’word-break:keep-all;width:100%;height:100%;background-color:#EEEEEE;’>";
 if (this.autoPlay)
  boxStr += "<br /> 点击此处开始进行自动播放……";
 else
  boxStr += "<br /> 点击此处开始播放,播放时单击播放下一张……";
 boxStr += "</div>";
 var img;
 var transform = this.transform;
 for (var i = 0; i < this.imgs.length; i++) {
  if (this.transform >= 23)
   var transform = Math.floor(Math.random()*23);
  boxStr += "<img src=’" + this.imgs[i] + "’ style=’display:none;width:";
  boxStr += this.width + ";height:" + this.height + "px;height:px;filter:";
  boxStr += "revealTrans(transition=" + transform + ",duration=1);’";
  if (!this.autoPlay)
   boxStr += "’ onclick=’window.imageSlide.play();’ alt=’点击播放下一张’";
  boxStr += " />";
 }
 boxStr += "</div>";
 document.writeln(boxStr);
 var box = document.getElementById(this.boxId);
 this.first = box.childNodes[0];
 this.frms = box.getElementsByTagName("IMG");
}//播放
ImageSlide.prototype.play = function () {
 if (window.imageSlide.imgs.length) {
  window.imageSlide.first.style.display = "none";
  if (window.imageSlide.count >= window.imageSlide.imgs.length) {
   alert("播放完毕!");
   window.imageSlide.frms[window.imageSlide.count-1].style.display = "none";
   window.imageSlide.first.style.display = "block";
   window.imageSlide.first.innerHTML = "<br /> 点击此处再次进行播放!";
   clearInterval(window.imageSlide.timer);
   window.imageSlide.count = 0;
  }
  else if (window.imageSlide.count == 0) {
   window.imageSlide.first.style.display = "none";
   window.imageSlide.frms[0].filters[0].apply();
   window.imageSlide.frms[0].style.display = "block";
   window.imageSlide.frms[0].filters[0].play();
  }
  else {
   window.imageSlide.frms[window.imageSlide.count-1].style.display = "none";
   window.imageSlide.frms[window.imageSlide.count].filters[0].apply();
   window.imageSlide.frms[window.imageSlide.count].style.display = "block";
   window.imageSlide.frms[window.imageSlide.count].filters[0].play();
  }
  window.imageSlide.count++;
 }
 else {
  alert("你没有放入所有图片,无法进行播放!");
 }
}//连续播放
ImageSlide.prototype.timerPlay = function () {
 this.timer = setInterval(this.play, this.delay * 1000);
}//实例化一个ImageSlide对象imageSlide并将其做为window对象的一个子对象
window.imageSlide = new ImageSlide();<html>
 
<head>
<title>永失我爱</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
 
<body bgcolor="black">
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<h1 style="color:#EEEEEE;">永失我爱</h1>
<div style="padding:1px;background-color:white;width:1px;height:1px;">
<script language="JavaScript" type="text/javascript" src="js/image_slide.js"></script>
<script language="JavaScript" type="text/javascript"> 
//添加播放的图片
window.imageSlide.pushImgs( "images/1.jpg","images/2.jpg","images/3.jpg" );
//还可以进行如下的设置
//window.imageSlide.setAutoPlay(false);  //是否自动播放
//window.imageSlide.setBoxId("myImageSlide");  //设置播放容器的ID
//window.imageSlide.setDelay(8);  //设置播放延时
//window.imageSlide.setTransform(18);  //设置切换效果
window.imageSlide.setSize(640, 320);  //设置播放容器的大小
window.imageSlide.display();  //显示
</script>
</div><br /></td>
</tr>
</table>
 
</body>
 
</html>
这个代码来自:http://www.sudu.cn/info/html/edu/20070422/322455.htmlHTML文件夹里有images文件夹,里面有1.jpg,2.jpg,3.jpg
可是这么代码运行后为什么不能播放图片啊?
请详细一些,
谢谢~

解决方案 »

  1.   

    1、if((/MSIE\s*[5-9]/).test(navigator.appVersion)) 执行没通过,这个正则有问题
    2、js代码中拼接的有问题,所有的单引号都是’ 而不是'
      

  2.   


    这个播放图片的效果在IE中是看得到的,ff中没有滤镜效果
    至于不能播放,是否是用法错误。你看看别人是怎么运行的。
      

  3.   


    if((/MSIE\s*[5-9]/).test(navigator.appVersion)) {
     }
     else {
      alert("请使用IE5或IE5以上版本的浏览器使用本程式!");
     }这部分去掉以后,还是不能显示图片.
      

  4.   

    测试已通过!IE7下<HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    // JavaScript Document// JavaScript Document/**
     * =========================================================================
     * 本程式可自由复制、修改、传播,不得删除以下信息。如用于商业用途须经原作者同意方可使用。
     * =========================================================================
     * 程式名称:ForceWindow(@iClass.JS)
     * 描  述:网页上的图片幻灯片。
     * 版  本:1.0.0
     * 创建时间:2005年4月23日
     * 修改时间:2005年4月23日
     * 作  者:钟钟
     * 邮箱地址:[email protected]
     * 版权声明:本程式属于iClass.JS,版权归作者所有。
     * 讨论地址:http://www.iecn.net/forum/showthread.php?threadid=16975
     * 有关iClass计划详见:http://www.iecn.net/forum/showthread.php?threadid=14811
     * =========================================================================
     */
     //构造ImageSlide类
    function ImageSlide () {
     //if((/MSIE\s*[5-9]/).test(navigator.appVersion)) {
      this.count = 0;
      this.timer = null;
      this.first = new Object();
      this.frms = new Array();  this.imgs = new Array();
      this.width = 640;
      this.height = 480;
      this.boxId = "imageSlideBox";
      this.delay = 5;
      this.autoPlay = true;
      this.transform = 23;
      /**
       * 播放转换效果说明
       * --------------
       *  0. 矩形缩小
       *  1. 矩形扩大
       *  2. 圆形缩小
       *  3. 圆形扩大
       *  4. 从下到上
       *  5. 从上到下
       *  6. 从左到右
       *  7. 从右到左
       *  8. 竖百叶窗
       *  9. 横百叶窗
       * 10. 错位横百叶窗
       * 11. 错位竖百叶窗
       * 12. 点扩散
       * 13. 两边到中间
       * 14. 中间到两边
       * 15. 中间到上下
       * 16. 上下到中间
       * 17. 右下到左上
       * 18. 右上到左下
       * 19. 左上到右下
       * 20. 左下到右上
       * 21. 横条
       * 22. 竖条
       * 23. 随机
       * --------------
       */
     //}
     //else {
     // alert("请使用IE5或IE5以上版本的浏览器使用本程式!");
     //}
    }//加入一张或多张图片(传入一个或多个图片路径)
    //pushImg(sPath1 [, sPath2 [, sPath3 [, ...]]])
    ImageSlide.prototype.pushImgs = function () {
     for (var i = 0; i < arguments.length; i++)
      this.imgs.push(arguments[i]);
    }//设置图片播放容器的长宽
    ImageSlide.prototype.setSize = function (nWidth, nHeight) {
     this.width = nWidth;
     this.height = nHeight;
    }//设置图片播放容器的ID
    ImageSlide.prototype.setBoxId = function (sBoxId) {
     this.boxId = sBoxId;
    }//设置是否自动播放
    ImageSlide.prototype.setAutoPlay = function (bAutoPlay) {
     this.autoPlay = bAutoPlay;
    }//设置自动播放的延时秒数
    ImageSlide.prototype.setDelay = function (nSeconds) {
     this.delay = nSeconds;
    }//设置播放的转换效果(0-23的整数)
    ImageSlide.prototype.setTransform = function (nTransform) {
     this.transform = nTransform;
    }//显示
    ImageSlide.prototype.display = function () {
     var boxStr = "<div style='width:" + this.width + "px;height:" + this.height + "px;' ";
     boxStr += "id='"  + this.boxId + "'><div ";
     if (this.autoPlay)
      boxStr += "onclick='window.imageSlide.play();window.imageSlide.timerPlay();'";
     else
      boxStr += "onclick='window.imageSlide.play();'";
     boxStr += "style='word-break:keep-all;width:100%;height:100%;background-color:#EEEEEE;'>";
     if (this.autoPlay)
      boxStr += "<br /> 点击此处开始进行自动播放……";
     else
      boxStr += "<br /> 点击此处开始播放,播放时单击播放下一张……";
     boxStr += "</div>";
     var img;
     var transform = this.transform;
     for (var i = 0; i < this.imgs.length; i++) {
      if (this.transform >= 23)
       var transform = Math.floor(Math.random()*23);
      boxStr += "<img src='" + this.imgs[i] + "' style='display:none;width:";
      boxStr += this.width + ";height:" + this.height + "px;height:px;filter:";
      boxStr += "revealTrans(transition=" + transform + ",duration=1);'";
      if (!this.autoPlay)
       boxStr += "' onclick='window.imageSlide.play();' alt='点击播放下一张'";
      boxStr += " />";
     }
     boxStr += "</div>";
     document.writeln(boxStr);
     var box = document.getElementById(this.boxId);
     this.first = box.childNodes[0];
     this.frms = box.getElementsByTagName("IMG");
    }//播放
    ImageSlide.prototype.play = function () {
     if (window.imageSlide.imgs.length) {
      window.imageSlide.first.style.display = "none";
      if (window.imageSlide.count >= window.imageSlide.imgs.length) {
       alert("播放完毕!");
       window.imageSlide.frms[window.imageSlide.count-1].style.display = "none";
       window.imageSlide.first.style.display = "block";
       window.imageSlide.first.innerHTML = "<br /> 点击此处再次进行播放!";
       clearInterval(window.imageSlide.timer);
       window.imageSlide.count = 0;
      }
      else if (window.imageSlide.count == 0) {
       window.imageSlide.first.style.display = "none";
       window.imageSlide.frms[0].filters[0].apply();
       window.imageSlide.frms[0].style.display = "block";
       window.imageSlide.frms[0].filters[0].play();
      }
      else {
       window.imageSlide.frms[window.imageSlide.count-1].style.display = "none";
       window.imageSlide.frms[window.imageSlide.count].filters[0].apply();
       window.imageSlide.frms[window.imageSlide.count].style.display = "block";
       window.imageSlide.frms[window.imageSlide.count].filters[0].play();
      }
      window.imageSlide.count++;
     }
     else {
      alert("你没有放入所有图片,无法进行播放!");
     }
    }//连续播放
    ImageSlide.prototype.timerPlay = function () {
     this.timer = setInterval(this.play, this.delay * 1000);
    }//实例化一个ImageSlide对象imageSlide并将其做为window对象的一个子对象
    window.imageSlide = new ImageSlide();//-->
    </SCRIPT>
     <body bgcolor="black">
    <table width="100%" height="100%">
    <tr>
    <td align="center" valign="middle">
    <h1 style="color:#EEEEEE;">永失我爱</h1>
    <div style="padding:1px;background-color:white;width:1px;height:1px;">
    <script language="JavaScript" type="text/javascript"> 
    //添加播放的图片
    window.imageSlide.pushImgs( "images/1.jpg","images/2.jpg","images/3.jpg" );
    //还可以进行如下的设置
    //window.imageSlide.setAutoPlay(false);  //是否自动播放
    //window.imageSlide.setBoxId("myImageSlide");  //设置播放容器的ID
    //window.imageSlide.setDelay(8);  //设置播放延时
    //window.imageSlide.setTransform(18);  //设置切换效果
    window.imageSlide.setSize(640, 320);  //设置播放容器的大小
    window.imageSlide.display();  //显示
    </script>
    </div><br /></td>
    </tr>
    </table>
     
    </body></HTML>