zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [TimLinux] myblog 创建第一个app
    [TimLinux] MySQL InnoDB的外键约束不支持set default引用选项
    [TimLinux] 养成一个习惯
    [TimLinux] myblog 页面Axure设计
    [TimLinux] MySQL 中的CASE/WHEN语法
    [TimLinux] Python Django myblog启动
    [TimLinux] Python 模块
    [TimLinux] JavaScript 获取元素节点的5种方法
    堆和栈的一点知识
    OpenCV2基础操作----直线、矩形、圆、椭圆函数的使用
  • 原文地址:https://www.cnblogs.com/zhangsir/p/1433696.html
Copyright © 2011-2022 走看看