asp.net制作幻灯片 (2)

ImageSlide.htm  
   
  <html>  
  <head>  
  <title>永失我爱</title>  
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">  
  </head>  
  <body   bgcolor="black">  
  <table    >  
  <tr>  
  <td     valign="middle">  
  <h1  >永失我爱</h1>  
  <div  >  
  <script   language="JavaScript"   type="text/javascript"   src="http://www.likecs.com/ImageSlide-1.0.0.iclass.js"></script>  
  <script   language="JavaScript"   type="text/javascript">  
  //添加播放的图片  
  window.imageSlide.pushImgs(   "images/00.jpg",   "images/01.jpg",   "images/02.jpg",   "images/03.jpg",   "images/04.jpg",  
                                                          "images/05.jpg",   "images/06.jpg",   "images/07.jpg",   "images/08.jpg",   "images/09.jpg",  
                                                          "images/10.jpg",   "images/11.jpg",   "images/12.jpg",   "images/13.jpg",   "images/14.jpg",  
                                                          "images/15.jpg",   "images/16.jpg",   "images/17.jpg",   "images/18.jpg",   "images/19.jpg",  
                                                          "images/20.jpg",   "images/21.jpg",   "images/22.jpg",   "images/23.jpg",   "images/24.jpg",  
                                                          "images/25.jpg",   "images/26.jpg",   "images/27.jpg",   "images/28.jpg",   "images/29.jpg",  
                                                          "images/30.jpg",   "images/31.jpg",   "images/32.jpg",   "images/33.jpg",   "images/34.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>  
  </td>  
  </tr>  
  </table>  
  </body>  
  </html>  
   
  ImageSlide-1.0.0.iclass.js  
   
  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=http://www.likecs.com/\'width:"   +   this.width   +   "px;height:"   +   this.height   +   "px;\'   ";  
    boxStr   +=   "id=http://www.likecs.com/\'"     +   this.boxId   +   "\'><div   ";  
    if   (this.autoPlay)  
      boxStr   +=   "onclick=http://www.likecs.com/\'window.imageSlide.play();window.imageSlide.timerPlay();\'";  
    else  
      boxStr   +=   "onclick=http://www.likecs.com/\'window.imageSlide.play();\'";  
    boxStr   +=   "style=http://www.likecs.com/\'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=http://www.likecs.com/\'"   +   this.imgs[i]   +   "\'   style=http://www.likecs.com/\'display:none;width:";  
      boxStr   +=   this.width   +   ";height:"   +   this.height   +   "px;height:px;filter:";  
      boxStr   +=   "revealTrans(transition="   +   transform   +   ",duration=1);\'";  
      if   (!this.autoPlay)  
        boxStr   +=   "\'   onclick=http://www.likecs.com/\'window.imageSlide.play();\'   alt=http://www.likecs.com/\'点击播放下一张\'";  
      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();

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwzgfw.html