一个不错的幻灯片效果(JS脚本)

 

<! 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 >
     < title > 图片新闻 </ title >
     < meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " >
     < meta content = " 图片新闻 "  name = " keywords " >
     < meta content = " 新闻中心图片新闻 "  name = " description " >
     < meta content = " 1,231,1 "  name = " publishid " >
    
     < style type = " text/css " >
<!--
body  ... {
    background-image: url(FQNP-2007-IMAGES/l1.gif);
    background-repeat: repeat-y;
    background-position: 49px;
}
.itemOff  ... {
    color: #0099CC;
    cursor: hand;
    background-color: #ECF7FF;
    height: 20px;
    margin-right: 1px;
    margin-left: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px solid #ABDEFA;
} .itemOn  ... {
    color: #FF0000;
    cursor: hand;
    background-color: #ABDEFA;
    height: 20px;
    margin-right: 1px;
    margin-left: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px solid #ABDEFA;
}
body,td,th  ... {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
-->
     </ style >
</ head >
< body onload = " SlidePic(0);inislide(); " >
     < script language = " JavaScript "  type = " text/javascript " >
     <!--
         /**/ /* Data begin */
         var  sPicArr  =   new  Array();

        sPicArr[ 0 ]  =   new  Array( ' UpLoad/20071115165029.JPG ' , ' 天安门夜景 ' , '' , ' Shownews.aspx?ID=1231 ' , '' );
sPicArr[ 1 ]  =   new  Array( ' UpLoad/20071115164742.JPG ' , ' 香山红叶 ' , '' , ' Shownews.aspx?ID=1230 ' , '' );
sPicArr[ 2 ]  =   new  Array( ' UpLoad/20071022100128.JPG ' , ' 夕阳 ' , '' , ' Shownews.aspx?ID=1158 ' , '' );
sPicArr[ 3 ]  =   new  Array( ' UpLoad/20071015091114.JPG ' , ' 那拉提草原风景 ' , '' , ' Shownews.aspx?ID=1138 ' , '' );
sPicArr[ 4 ]  =   new  Array( ' UpLoad/20071015090219.JPG ' , ' 喀纳斯湖风光 ' , '' , ' Shownews.aspx?ID=1137 ' , '' );
sPicArr[ 5 ]  =   new  Array( ' UpLoad/20070920103404.JPG ' , ' 喀纳斯湖—月亮湾 ' , '' , ' Shownews.aspx?ID=1113 ' , '' );

            
         /**/ /* Data end */


     function  GetObj(objName) ... {
        if(document.getElementById)...{
            return eval('document.getElementById("' + objName + '")');
        }else if(document.layers)...{
            return eval("document.layers['" + objName +"']");
        }else...{
            return eval('document.all.' + objName);
        }
    }
     var  plPic  =   new  Image();
     var  gIndex  =   0 ;
     function  SlidePic(index) ... {
        gIndex = index;
//patch by dorian 1017
        if ('Microsoft Internet Explorer' == navigator.appName)
        ...{
        document.images["slidePic"].filters.item(0).Apply();
        }
        
        document.images["slidePic"].src = sPicArr[index][0];
        document.images["slidePic"].alt = sPicArr[index][1];
        GetObj("slidePicLink").href = sPicArr[index][3];
        GetObj("slideTitle").innerHTML = sPicArr[index][1];
        GetObj("slideDesc").innerHTML = sPicArr[index][2];
//        GetObj("slideLink").innerHTML = "[<a href='"+sPicArr[index][3]+"' target=_blank title='全文'>全文</a>]";

        
        if((index+1)<sPicArr.length) plPic.src = sPicArr[index+1][0];//preload;

        for(var i=0;i<sPicArr.length;i++)...{
            GetObj("item"+i).className = "itemOff";
            GetObj("item"+i).onmouseover = function()...{return false;}
            GetObj("item"+i).onmouseout = function()...{return false;}
        }
        GetObj("item"+index).className = "itemOn";
        /**//*fixed by AmourGUO, 051017
        GetObj("item"+index).onmouseover = function(){
            pauseslide();
        }
        GetObj("item"+index).onmouseout = function(){
            inislide();
        }
        */
                  if ('Microsoft Internet Explorer' == navigator.appName)
        ...{
        document.images["slidePic"].filters.item(0).play();
        }
        
    }

     function  NextPic() ... {
        gIndex = ((gIndex+1)>=sPicArr.length?0:(gIndex+1));
        SlidePic(gIndex);
    }

     function  PrevPic() ... {
    //alert(gIndex);
        gIndex = ((gIndex-1)<0?(sPicArr.length-1):(gIndex-1));
    //alert(gIndex);
        SlidePic(gIndex);
        
    }
     var  sid;
     function  inislide()
     ... {
        if(sid==null) sid = setInterval('NextPic()', 6000);//fixed by AmourGUO, 051017
    }
     function  pauseslide()
     ... {
        clearInterval(sid);
        sid = null;//fixed by AmourGUO, 051017
    }

     // -->
     </ script >
< table width = " 100% "  cellspacing = " 0 "  align = " center " >
         < tbody >
             < tr align = " center " >
                 < td align = " center "  valign = " middle " >
                     < div align = " center " >< a href = " # "  title = ""  target = " _blank "  id = " slidePicLink " >
                       < img src = " images o_picture1.gif "  alt = ""  name = " slidePic "  width = " 200 "  height = " 150 "
                            border = " 0 "  align = " middle "  id = " slidePic "  style = " filter: revealtrans(duration=2.0,transition=12) "
                            onmouseover = " pauseslide(); "  onmouseout = " inislide(); " ></ a ></ div ></ td >
             </ tr >
             < tr align = " center " >
                 < td onmouseover = " pauseslide(); "  onmouseout = " inislide(); "  align = " center " >
                 </ td >
             </ tr >
         </ tbody >
     </ table >
     < table width = " 100% "  align = " center "  cellspacing = " 0 "  onmouseover = " pauseslide() "  onmouseout = " inislide() " >
       <!-- // fixed by AmourGUO, 051017-->
       < tbody >
         < tr >
           < td width = " 23 " >< img style = " cursor: pointer "  onclick = " PrevPic();pauseslide();inislide() "  height = " 19 "
                                        alt = " 上一张 "  src = " images/gw_news_img_05.gif "  width = " 23 "   /></ td >
           < td class = " td-3 "  style = " text-align:center " >< script language = " JavaScript "  type = " text/javascript " >
<!--

document.writeln( " <span id='item0'  class='te2' onClick='SlidePic(0)'>1</span> " );
for ( var  i = 1 ;i < sPicArr.length;i ++ ) ... {

document.writeln("<span id='item"+i+"' class='te2' onClick='SlidePic("+i+");'>"+(i+1)+"</span>");//fixed by AmourGUO, 051017
}

// -->
                                     </ script >
           </ td >
           < td width = " 23 " >< img style = " cursor: pointer "  onclick = " NextPic();pauseslide();inislide() "  height = " 19 "
                                        alt = " 下一张 "  src = " images/gw_news_img_06.gif "  width = " 23 "   /></ td >
         </ tr >
       </ tbody >
     </ table >< div id = " slideTitle "  style = " text-align:center; line-height:20px; color:#0066CC " >
                         < div align = " center " > 福建福清核电有限公司首页 </ div >
                     </ div >
                     < div >
                         < span id = " slideDesc " ></ span >< span class = " linkYellow "  id = " slideLink " ></ span >                      </ div >  
</ body >
</ html >