js 幻灯片效果(兼容netscape)

<table width="381" height="191" border="0" cellpadding="7" cellspacing="1" bgcolor="#000000">
             
<tr>
               
<td bgcolor="#FFFFFF"><div align="center">
       
    
<style type="text/css">
    
/* 数字按钮框样式 */
    #imgTitle 
{FILTER:ALPHA(opacity=70);position:relative;left:0px;text-align:left;overflow: hidden;}
    #imgTitle_up 
{left:0px;text-align: left; height:1px; width:inherit; }
    #imgTitle_down 
{left:0px;text-align: right; width:inherit; }
    
/* 图片框样式 */
    .imgClass 
{border: 0px solid #000;}
    
/* 图片文字框样式 */
    #txtFrom 
{text-align: center;vertical-align: middle;}
    
/* 数字按钮样式 */
    .button 
{text-decoration: none;padding: 2px 7px;background: #7B7B63;margin: 0px;font: bold 9px sans-serif; border-left:#fff 1px solid;}
    a.button, a.button:link, a.button:visited 
{font-family: sans-serif;text-decoration: none;color:#FFFFFF;background-color: #000000;}
    a.button:hover 
{font-family: sans-serif;text-decoration: none;color:#fff;background:#fff; }
    .buttonDiv 
{background: #000000;height: 1px;width: 21px;float: left;text-align: center; vertical-align: middle;}
    
/*渐变*/ 
    .trans 
{ width:90px; background-color:#000;filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40);}
           
</style>
       
<script language="JavaScript" type="text/javascript">
    
var imgWidth=366;               //图片宽
    var imgHeight=200;              //图片高
    var textFromHeight=18;          //焦点字框高度 (单位为px)
    var textStyle="f12";            //焦点字class style (不是连接class)
    var textLinkStyle="FONT"//焦点字连接class style
    var buttonLineOn="#ce0609";            //button下划线on的颜色
    var buttonLineOff="#000";           //button下划线off的颜色
    var TimeOut=5000;               //每张图切换时间 (单位毫秒);
    var imgUrl=new Array(); 
    
var imgLink=new Array();
    
var imgtext=new Array();
    
var imgAlt=new Array();
    
var adNum=0;
    
var theTimer=0;

    
//焦点字框高度样式表 开始
    document.write('<style type="text/css">');
    document.write(
'#focuseFrom{'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');
    document.write(
'#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;'+imgWidth+'px;overflow:hidden;}');
    document.write(
'#imgTitle{'+imgWidth+';top:-'+(textFromHeight+15)+'px;height:18px}');
    document.write(
'</style>');
    document.write(
'<div id="focuseFrom">');
    
//焦点字框高度样式表 结束

    imgUrl[
1]='http://www.rednet.cn/UploadFiles/VarPic/2007/05/20/zhoul_20070520091930_0.jpg';
    imgtext[
1]='<A HREF=http://globe.rednet.cn/c/2007/05/20/1206557.htm TARGET=_blank class='+textLinkStyle+'>组图:印尼沿海遭巨浪袭击上千人逃离家园</A>';
    imgLink[
1]='http://globe.rednet.cn/c/2007/05/20/1206557.htm';
    imgAlt[
1]='印尼沿海遭巨浪袭击上千人逃离家园';

    imgUrl[
2]='http://www.rednet.cn/UploadFiles/VarPic/2007/05/20/zhoul_20070520120312_0.jpg';
    imgtext[
2]='<A HREF=http://ent.rednet.cn/c/2007/05/20/1206522.htm TARGET=_blank class='+textLinkStyle+'>组图:吉杰成功“复活” 评委私心引网友炮轰</A>';
    imgLink[
2]='http://ent.rednet.cn/c/2007/05/20/1206522.htm';
    imgAlt[
2]='吉杰成功“复活”';

    imgUrl[
3]='http://www.rednet.cn/UploadFiles/VarPic/2007/05/20/zhoul_20070520120622_0.jpg';
    imgtext[
3]='<A HREF=http://globe.rednet.cn/c/2007/05/19/1206419.htm TARGET=_blank class='+textLinkStyle+'>5亿美元沉船宝藏掀起美国探险家寻宝热潮</A>';
    imgLink[
3]='http://globe.rednet.cn/c/2007/05/19/1206419.htm';
    imgAlt[
3]='美国寻宝公司宣布打捞到5亿美元财宝';

    
var intPage =0;
    
for (var i=1;i<=imgUrl.length;i++)
    {
      intPage
++;
    }

    
function changeimg(n)
    {
     adNum
=n;
     window.clearInterval(theTimer);
     adNum
=adNum-1;
     nextAd();
    }
    
function goUrl(){
    window.open(imgLink[adNum],
'_blank');
    }
    
//NetScape开始
    if (navigator.appName == "Netscape")
    {
    document.write(
'<style type="text/css">');
    document.write(
'.buttonDiv{height:4px;21px;}');
    document.write(
'</style>');
    
function nextAd(){
     
if(adNum<(intPage-1))adNum++;
     
else adNum=1;
     theTimer
=setTimeout("nextAd()", TimeOut);
     document.images.imgInit.src
=imgUrl[adNum];
     document.images.imgInit.alt
=imgAlt[adNum]; 
        document.getElementById(
'focustext').innerHTML=imgtext[adNum];
     document.getElementById(
'link'+adNum).style.background=buttonLineOn;
     document.getElementById(
'imgLink').href=imgLink[adNum];
     
for (var i=1;i<=intPage;i++)
     {
        
if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
     } 
    }
     document.write(
'<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="'+imgUrl[1]+'" name="imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[1]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgtext[1]+'</span></div>')
     document.write(
'<div id="imgTitle">');
     document.write(
'<div id="imgTitle_down">');
    
//数字按钮代码开始
    for(var i=1;i<intPage;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'">'+i+'</a>');}
    
//数字按钮代码结束
     document.write('</div>');
     document.write(
'</div>');
     document.write(
'</div>');
     nextAd();
    }
    
//NetScape结束
    //IE开始
    else
    {
    
var count=0;
    
for (i=1;i<intPage;i++) {
     
if( (imgUrl[i]!=""&& (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
      count
++;
     } 
else {
      
break;
     }
    }
    
function playTran(){
     
if (document.all)
      document.images.imgInit.filters.BlendTrans.play();  
    }
    
var key=0;
    
function nextAd(){
     
if(adNum<count)adNum++ ;
     
else adNum=1;
    
     
if( key==0 ){
      key
=1;
     } 
else if (document.all){
      
//imgInit.filters.revealTrans.Transition=6;
      document.images.imgInit.filters.BlendTrans.apply();
         playTran();
        }
     document.images.imgInit.src
=imgUrl[adNum];
     document.images.imgInit.alt
=imgAlt[adNum]; 
     document.getElementById(
'link'+adNum).style.background=buttonLineOn;
     
for (var i=1;i<=count;i++)
     {
        
if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
     } 
        focustext.innerHTML
=imgtext[adNum];
     theTimer
=setTimeout("nextAd()", TimeOut);
    }
    document.write(
'<a target=_self href="javascript:goUrl()"><img style="FILTER: BlendTrans ( duration=1 );" src="javascript:nextAd()" width='+imgWidth+' height='+imgHeight+' border=0 vspace="0" name=imgInit class="imgClass"></a>');
    document.write(
'<div id="txtFrom"><span id="focustext" class="'+textStyle+'"></span></div>');
    document.write(
'<div id="imgTitle">');
    document.write(
' <div id="imgTitle_down"> <a class="trans"></a>');
    
//数字按钮代码开始
    for(var i=1;i<intPage;i++){document.write('<a id="link'+i+'"   href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>');}
    
//数字按钮代码结束
    document.write('</div>');
    document.write(
'</div>');
    document.write(
'</div>');
changeimg(
1);
    }
    
//IE结束
      </script>
               
</div></td>
             
</tr>
           
</table>
原文地址:https://www.cnblogs.com/zhangsir/p/1433696.html