我在网页中加了一个img控件,想通过枚举的方法对一个目录下的图片实现幻灯片的效果,怎么才能做到了?请各位大侠给点思路,不胜感激!

解决方案 »

  1.   

    关注啊       \\\|///  
          \\ .-.- //  
    .      ( .@.@ )  
    +-------oOOo-----(_)-----oOOo---------+  
    |                  |  
    |     感谢无私帮助他人的朋友     |  
    |                  |  
    +---------------------Oooo------------+
      

  2.   

    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css"> <!-- select { font-family: "tahoma"; font-size: 10px; color: #666666}
    input { font-family: "tahoma"; font-size: 10px; color: #000000; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
    --></style>
    <SCRIPT LANGUAGE="JavaScript">var rotate_delay = 1000; // delay in milliseconds (5000 = 5 secs)
    current = 0;
    function next() {
    if (document.slideform.slide[current+1]) {
    document.images.show.src = document.slideform.slide[current+1].value;
    document.slideform.slide.selectedIndex = ++current;
       }
    else first();
    }
    function previous() {
    if (current-1 >= 0) {
    document.images.show.src = document.slideform.slide[current-1].value;
    document.slideform.slide.selectedIndex = --current;
       }
    else last();
    }
    function first() {
    current = 0;
    document.images.show.src = document.slideform.slide[0].value;
    document.slideform.slide.selectedIndex = 0;
    }
    function last() {
    current = document.slideform.slide.length-1;
    document.images.show.src = document.slideform.slide[current].value;
    document.slideform.slide.selectedIndex = current;
    }
    function ap(text) {
    document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
    rotate();
    }
    function change() {
    current = document.slideform.slide.selectedIndex;
    document.images.show.src = document.slideform.slide[current].value;
    }
    function rotate() {
    if (document.slideform.slidebutton.value == "Stop") {
    current = (current == document.slideform.slide.length-1) ? 0 : current+1;
    document.images.show.src = document.slideform.slide[current].value;
    document.slideform.slide.selectedIndex = current;
    window.setTimeout("rotate()", rotate_delay);
       }
    }</SCRIPT>
    <body bgcolor="#ffffff" text="#000000">
    <form name="slideform">
    <table cellspacing="1" cellpadding="4" bgcolor="#000000">
    <tr>
    <td align="center" bgcolor="white" width="200" height="200">
    <img src="1.gif" name="show">
    </td>
    </tr>
    <tr>
    <td align="center" bgcolor="#c0c0c0">
    <select name="slide" onChange="change();">
    <option value="1.gif" selected>
    1
    <option value="2.gif">
    2
    <option value="3.gif">
    3
    <option value="4.gif">
    4
    <option value="5.gif">
    5
    <option value="6.gif">
    6
    <option value="7.gif">
    7
    <option value="8.gif">
    8
    <option value="9.gif">
    9
    <option value="10.gif">10</option>
    </select>
    </td>
    </tr>
    <tr>
    <td align="center" bgcolor="#c0c0c0">
    <input type="button" onClick="first();" value="|<<" title="Beginning"> <input type="button" onClick="previous();" value="<<" title="Previous">
    <input type="button" name="slidebutton" onClick="ap(this.value);" value="开始" title="AutoPlay">
    <input type="button" onClick="next();" value=">>" title="Next"> <input type="button" onClick="last();" value=">>|" title="End">
    </td>
    </tr>
    </table>
    </form>
    </body>
      

  3.   

    给你发的经典的:ImageSlide.htm<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="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.jsfunction 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();
      

  4.   

    感觉网页上五花八门的效果基本都用javascript做吧