实现自己的"雅虎幻灯片"

    幻灯片大家都非常熟悉了，我以雅虎幻灯片为灵感，开发了自己的幻灯片。
    首先，这个幻灯片程序是在我的jsp图片查看器上加上去的，算是满足自己的需求吧，哈。因为有时候看幻灯片对我来说是一种享受。。。嗯
    首先是做一个基本的图片自动播放的程序，这个纯javascript就可以实现，实现需要的javascript方法也很简单，代码如下：
     function rotateBanner(frameNumber,interval){
      document.banner.src=fn[frameNumber].src;//为页面中的id为banner的图片标记动态定义图片的链接地址
      var imageChoice=frameNumber+1;
      if(imageChoice==fn.length){
         imageChoice=0;
      }
      player=window.setTimeout("rotateBanner("+imageChoice+","+inv+")",inv);
   }
   其中frameNumber为图片路径数组的下标，interval为显示下一幅图片的间隔时间。
   首先，我们要定义一个全局数组，数组各个元素的值为图片的url。（一般我们都把一类的图片放在一个目录中，这种情况可以通过动态生成的方法来动态的为这个全局数组的各个元素赋值）
   js方法的使用也很简单，在这个页面的body标签加入onload=“rotateBanner（0，5000）”即可，在这里0为数组的第一个元素下标，5000为播放的间隔时间5秒。
   一个不能被我们控制的幻灯片页面就产生了。下面我们就要开始对其进行控制了，首先，我们实现让幻灯片停止滚动播放图片。这个很简单，上面的js方法我们定义了一个定时器player变量，这个player是个全局的，当不停的递归调用的时候，都是它自己在不停的被赋值。停止它我们只需把这个定时器去处即可。在页面中加上一个超链接，在它的onclick事件中触发一个js方法，不妨我们再写一个方法，代码为：
   function stop(){
       window.clearTimeout(player);
   }
    这样就把图片循环显示的player定时器去除了。
    有停止就要有开始，开始就容易了，在开始超链接的onclick事件调用rotateBanner（）方法就行了，但这里有个问题，这个一会再说。
    我们再添加上一幅，下一幅超链接，我们可以通过手工点击来显示下一页，这里就要又要定义一个全局变量了，它用来记录显示图片的数组下标。代码如下：其中的firstno变量我们后面再说它的作用
   function previous(){
    if(imgno==0)
       imgno=fn.length;
       imgno=imgno-1;
       firstno=imgno;
       document.banner.src=fn[imgno].src;
  }
   function next(){
     if(imgno==fn.length-1)
       imgno=-1;
       imgno=imgno+1;
       firstno=imgno;
      document.banner.src=fn[imgno].src;
}
  imgno就是我们定义的全局变量，来记录当前图片的数组下标。但这样有个问题，那就是imgno的初值为多少？现在的代码中并没初始化。好，我们分析一下，从页面打开开始，onload事件调用rotateBanner方法，这是最初的入口，下一幅上一幅按钮也是当执行了这个事件后才会有作用，所以我们需要在rotateBanner方法中记录图片的下标。其实也可以在声明的时候初始化为0。
   所以我们在点击开始的时候，rotateBanner（firstno，firstclock）函数里面的参数要传入当前图片的下标，不然我们点开始后幻灯片是开始幻灯显示了，但它又从0开始了，不会从我们停止定时器时候的显示的图片的位置开始。在此firstno全局变量也是起到记录的作用，但注意它和imgno变量的不同，它记录的是目前显示的图片的下标，而imgno在previous和next方法中已经不是当前图片的下标。firstclock是下面我要说明的内容。
   要控制每张图片显示间隔的时间，通过一个下拉选择框来操作，取得每个选项相应的值很简单。当选项改动时触发一个事件，我们取名为setclock（）方法，firstclock就是来获得间隔时间的，代码为：
   function setclock(clock){
      firstclock=clock;
      rotateBanner1(imgno,clock);
   }
   rotateBanner1（）的代码为：
   function rotateBanner1(frameNumber,interval){
     window.clearTimeout(player);
     document.banner.src=fn[frameNumber].src;
     var inv=interval;
     var imageChoice=frameNumber+1;
      if(imageChoice==fn.length){
         imageChoice=0;
     }
     imgno=frameNumber;
     firstno=imgno;
     player1=window.setTimeout("rotateBanner("+imageChoice+","+inv+")",inv);
   }
   通过代码可以看出，rotateBanner1方法其实在下拉框选项改变触发的时候只执行了一次，因为最后一行调用的还是原来的rotateBanner（）方法，这个代码的当时写的时候很有戏剧性，嘻嘻。
   其实这个幻灯片还是很简单的，大家只要动动脑，不难写出来。。。那天看一个人物传记，sun公司的前任首席科学家Bill Joy，一天编程能编14个小时。。。。：）。。。脑子越用越灵活，啥也不说了，向他学习，学习，再学习。
   哈哈，明年再接着blog了。。。。。