js计时器实现页面刷新和幻灯片效果

        在网页的特效制作中，经常要用到定时器，比如：间隔一定时间后页面自动跳转，或者间隔一定时间出现某种效果，像网页上的飞雪连天，或者背景颜色的定时改变等等。
       若要页面定时跳转，简单的可以在head头部的meta标记中设定重定向就可以了。但我要说的是javascript中的定时器，它的功能是十分强大和有用的。
      在javascript中有两个关于定时器的函数，它们是：
      1.倒计定时器：timename=setTimeout("function();",delaytime);
      2.循环定时器：timename=setInterval("function();",delaytime); d
      其中倒计定时器顾名思义，是设定一段时间后执行function()函数，而循环定时器则是每隔一段时间都执行function()函数一次。
     倒计定时器一般用在一段时间后的触发的事件，比如页面的定时跳转，有一些站点就是在注册完成后自动跳转到登录页面，或者用于确定是“老客”还是“新客”， 是老客则会点击确定的某个地方（由站长设定）而快速进入站点，如果是“新客”，就不知道特定的点击处，所以可以设定5秒或者10秒转入新客页面。
     循环定时器则用于页面上的持续效果，比如背景用飞雪。
     function()函数，可以是一个函数，也可以是几个函数，中间用;连接，还可以接入javawcript的语句。
     delaytime则是设定间隔的时间，以毫秒为单位。
     有时候，我们想把一个定时器去掉，像循环定时器就是一直不停的运动的。可以用clearTimeout(timename)来清除setTimeout()定时器，而setInterval()则用clearInterval(timename)来清除。
     好了，现在你就可以用定时器来为你的主页增光添彩了。 
 1.幻灯片效果:lanternPic.jsp
 

<% @ page contentType = " text/html;charset=utf-8 "   %>
<% @ page  import = " org.springframework.web.bind.ServletRequestUtils "   %>
<% @ page  import = " com.ouou.album.service.beans.UserRole "   %>
<% @ page  import = " java.util.List "   %>
<% @ page  import = " com.ouou.album.model.Albums "   %>
<% @ page  import = " com.ouou.album.util.ValidatorUtils "   %>
<% @ page  import = " java.text.SimpleDateFormat "   %>
<% @ page  import = " com.ouou.album.model.* "   %>
<% @ include file = " /common/taglib.jsp "   %>
<% @ include file = " /common/global.jsp "   %>
<%!
     private   final   static   int  pageSize  =   7 ;
     final  SimpleDateFormat commonsdf  =   new  SimpleDateFormat( " yyyy-MM-dd " );
%>
<%
     int  albumId = 0 ;
     int  phId  =  ServletRequestUtils.getIntParameter(request,  " id " ,  0 );
        int radioid = ServletRequestUtils.getIntParameter(request, "radioid",0);
    Photos photos  =  photosManager.getPhoto(phId);
    Albums albums  =  albumsManager.getAlbumsByPhotoId(phId);
     if ( null == photos) ... {
        out.println("<script>alert('该相片已不存在或被删除！');history.back();</script>");
        return;
    }
     if ( null != albums) ... {
       albumId = albums.getAlbumId();
    }
     // 取得以请求照片位于中间的指定pageSize个照片
    List photos_List =   photosManager.getPhotosByPhotoIdInMiddle(albumId,pageSize,phId,
                                                                                                                               UserRole.manager);
     int  totolNum = ( ! ValidatorUtils.isEmpty(photos_List))  ?  photos_List.size() :  0 ;
     int  middleId  =  ((totolNum  %   2 )  ==   0 )  ?  ((totolNum  /   2 )  -   1 ) : ((totolNum - 1 )  /   2 );
     int  leftId  =  ((middleId - 1 ) > 0 ) ?  (middleId - 1 ) :  0 ;
     int  rightId  =  ((middleId + 1 ) < totolNum) ?  (middleId + 1 ) :  0 ;
     if ( ! ValidatorUtils.isEmpty(photos_List)) ... {
      leftId=((Photos)photos_List.get(leftId)).getPhotoId();
      rightId=((Photos)photos_List.get(rightId)).getPhotoId();
    }
  %>

<! 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; charset=utf-8 "  http - equiv = " Content-Type " />
     < meta content = " zh-CN "  http - equiv = " Content-Language " />
     < meta http - equiv = " Page-Enter "
          content = " revealTrans(duration=3000, transition=<%=Math.round(Math.random()*23)%> " >
     < meta name = " robots "  content = " all " />
     <% @ include file = " /common/style.jsp "   %>
     <% @ include file = " /common/script.jsp "   %>
</ head >
< body id = " zzxpgl " >
< div id = " main " >
     <% @ include file = " /common/nav.jsp "   %>
     < hr >
     < div id = " content " >
         <% @ include file = " /common/user_nav.jsp "   %>
         < hr />
         < div id = " c_02 " >
             <% @ include file = " /common/menu.jsp "   %>
             < hr />
             < div id = " mid " >
                 < h3 id = " m_01 " >< a href = " /manage/index.do " > 管理首页 </ a >   >>    </ h3 >
                   < div id = " m_02 " >
                     < div id = " m_2_1 " >
                        < a href = " /manage/lanternPic.do?id=<%=leftId%> "  id = " left "   >
                             < img src = " /img/8/shim.gif "  border = 0 />
                         </ a >
                     </ div >
                     < div id = " m_2_2 " >
                         < div id = " m_2_2_1 " >
                             <%
                                 for  ( int  i  =   0 ; photos_List  !=   null   &&  i  <  photos_List.size(); i ++ )  ... {
                                    int photoId =((Photos) photos_List.get(i)).getPhotoId();
                            %>
                                    <a id="photo_<%=i%>" href="/manage/lanternPic.do?id=<%=photoId%>">
                                        <img src="/photo?type=1&pid=<%=photoId%>" border=0/>
                                    </a>
                            <%} %>
                         </ div >
                     </ div >
                     < div id = " m_2_3 " >
                         < a href = " /manage/lanternPic.do?id=<%=rightId%> "  id = " right "   >
                             < img src = " /img/8/shim.gif "  border = 0 />
                         </ a >
                     </ div >
                 </ div >
                 < div id = " m_03 " >< a href = " /manage/lanternPic.do?id=<%=rightId%> " >
                     < img id = " photosShow "  name = " photosShow "
                                 style = " FILTER:revealTrans(duration=2,transition=20); "
                    src = " /photo?type=3&pid=<%=photos.getPhotoId()%> " ></ a ></ div >
                 < div id = " m_06 " >
                     < ul id = " m_6_u " >
                     < li id = " m_6_u_1 " >< span > 幻灯播放 </ span > ：
                     < input type = " radio "  id = " 0 "  name = " radiobutton "  value = " radiobutton "
                                                               onclick = " changePic(0); "  checked /> 停止　　　
                     < input type = " radio "  name = " radiobutton "  id = " 3 "  value = " radiobutton "
                                                                onclick = " changePic(3000); " /> 3秒　　　
                     < input type = " radio "  name = " radiobutton "  id = " 8 "  value = " radiobutton "
                                                               onclick = " changePic(8000); " /> 8秒　　　
                     < input type = " radio "  name = " radiobutton "  id = " 12 "  value = " radiobutton "
                                                                  onclick = " changePic(12000); " /> 12秒
                     </ li >
                     </ ul >
                 </ div >
                 < div id = " m_06 " >
                     < ul id = " m_6_u " >
                         < li id = " m_6_u_1 " > 相片名称: <%= photos.getName() %></ li >
                         < li id = " m_6_u_2 " >< a href = " /photo?type=0&pid=<%=phId%> "  alt = " 查看大图 "  title = " 查看大图 "
                                             class = " b_link "  target = " _blank " > 查看大图 </ a ></ li >
                         < li id = " m_6_u_3 " > 上传于: </ li >
                         < li id = " m_6_u_4 " ><%= commonsdf.format(photos.getCreateTime()) %>
                         </ li >
                     </ ul >
                 </ div >
             </ div >
         </ div >
     </ div >
     < hr />
    <% @ include file = " /common/foot.jsp "   %>
</ div >
< script >
   var bannerAD = new  Array();
   var temp = 0 ;
</ script >
<%
   int  photoId;
   for ( int  i = middleId;i < totolNum;i ++ ) ... {
  photoId=((Photos)photos_List.get(i)).getPhotoId();
%>
<script>
   bannerAD[temp]='/photo?type=3&pid=<%=photoId%>';//图片的相对地址
   temp++;
</script>
<%} %>
<%
  for ( int  i = 0 ;i < middleId;i ++ ) ... {
  photoId=((Photos)photos_List.get(i)).getPhotoId();
%>
<script>
   bannerAD[temp]='/photo?type=3&pid=<%=photoId%>';
   temp++;
</script>
<%} %>
< script >
    var bannerADlink = new  Array();
    var adNum = 0 ;
    var midId =<%= middleId %> ;
    var totalNum =<%= totolNum %> ;
    var theTime;
    var preloadedimages = new  Array();
     for (var i = 0 ;i < bannerAD.length;i ++ ) ... {
         preloadedimages[i]=new Image();//防止图片在缓存内,暂无法显示问题
         preloadedimages[i].src=bannerAD[i];
    }
   function setTransition() ... {
       if (document.all)...{ //只有ie支持滤镜效果
        document.getElementById('photosShow').filters.revealTrans.Transition=Math.floor(Math.random()*23);
        document.getElementById('photosShow').filters.revealTrans.apply();
       }
    }
   function  playTransition() ... {
       if (document.all)  //只有ie支持滤镜效果
        document.getElementById('photosShow').filters.revealTrans.play();
   }
   function  changeNormalPic(time) ... {
        if(adNum<bannerAD.length-1) adNum++   ;
        else adNum=0;
        setTransition();
        parent.document.images["photosShow"].src= preloadedimages[adNum].src;
        playTransition();
        theTime=window.setTimeout("changeNormalPic("+time+")", time);
    }
   function changePic(time) ... {
        if(time==0)...{
           window.clearTimeout(theTime);
        }else ...{
           if(theTime!=null) window.clearTimeout(theTime);
           changeNormalPic(time);
        }
  }
</ script >
</ body >
</ html >

    在IE6 中如果用javascript改变img的src属性会显示不出图片，这是因在IE6中，图片要先下载到内存中，然后再显示出来，而我们改变了src之 后，刚加载时，内存中并不存在这张图片所以会显示不出来，而反复点击几次，第二次再打开时就会显示出来，解决这个问题的方法就是在加载时先把图片预下载到 内存，这样子就可以了，具体代码如下：
 var   oImage=new   Image()   //先定义一个图片
 oImage.src="1.gif"   //指定图片的src属性
 objImage.src=oImage.src //将要改变的图片的src指定为刚定义的图片的src即可

2.定时刷新页面,只要把js代码改为以下即可:
  

// 单击单选框按纽,定时刷新页面
< script type = " text/javascript " >
     var  rId  =   <%= radioid %>  ;
     var  timename;
     var  radioList  =  document.getElementsByName( " radiobutton " );
    switch  (rId) ... {
         case 0 :
            radioList[0].checked = true;
            window.clearTimeout(timename);
            break;
         case 3000 :
            radioList[1].checked = true;
            timename = setTimeout("showPic();", 3*1000);
            break;
         case 8000 :
            radioList[2].checked = true;
            timename = setTimeout("showPic();", 8*1000);
            break;
         case 12000 :
            radioList[3].checked = true;
            timename = setTimeout("showPic();", 12*1000);
            break;
     }
     // when click the radio
     function  changePic(id) ... {
        if(id==0)...{
            window.location = "/manage/lanternPic.do?id=<%=rightId%>&radioid="+id;
        }else if(id>0)...{
            window.location = "/manage/lanternPic.do?id=<%=rightId%>&radioid="+id;
        }
    }
     function  showPic()  ... {
        window.location = "/manage/lanternPic.do?id=<%=rightId%>&radioid=<%=radioid%>";
    }
</ script >

 
  以上代码的效果请查看图片:https://p-blog.csdn.net/images/p_blog_csdn_net/houhy/330717/o_dingshi.PNG

语法：
filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , duration=fDuration , transition=iTransitionType )
属性：
enable :可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true  :　 默认值。滤镜激活。
false : 滤镜被禁止。
duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。  
transition :可选项。整数值(Integer)。设置或检索转换所使用的方式。 0  :　 矩形收缩转换。
1  :　 矩形扩张转换。
2  :　 圆形收缩转换。
3  :　 圆形扩张转换。
4  :　 向上擦除。
5  :　 向下擦除。
6  :　 向右擦除。
7  :　 向左擦除。
8  :　 纵向百叶窗转换。
9  :　 横向百叶窗转换。
10  :　 国际象棋棋盘横向转换。
11  :　 国际象棋棋盘纵向转换。
12  :　 随机杂点干扰转换。
13  :　 左右关门效果转换。
14  :　 左右开门效果转换。
15  :　 上下关门效果转换。
16  :　 上下开门效果转换。
17  :　 从右上角到左下角的锯齿边覆盖效果转换。
18  :　 从右下角到左上角的锯齿边覆盖效果转换。
19  :　 从左上角到右下角的锯齿边覆盖效果转换。
20  :　 从左下角到右上角的锯齿边覆盖效果转换。
21  :　 随机横线条转换。
22  :　 随机竖线条转换。
23  :　 随机使用上面可能的值转换。