zoukankan      html  css  js  c++  java
  • JavaScript实现相册幻灯片效果

    <style type="text/css">
    .woon{border:1px solid #fff;}
    .wooff{border:1px solid #D85C8A;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=100,finishOpacity=0);}
    </style>
    <table width=252 border=0 align=center cellPadding=0 cellSpacing=0  background="http://img1.qq.com/lady/pics/3931/3931550.jpg">
        <tr>
          <td height="470" align="center">
            <div id=fc style="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward ); WIDTH:240px; HEIGHT:454px; border:1px solid #D85C8A">
              <div style="display:block"><a
                      href="http://lady.qq.com/a/20081202/000001.htm" target=_blank><img onMouseOver=clearAuto();
                      onMouseOut=setAuto() height=454
                      src="http://mat1.qq.com/lady/images/index/2008/12/02/hot1.jpg" width=240 border=0></a></div>
             
            <div style="display: none"><a href="http://lady.qq.com/zt/2008/damingxing/index.htm" target="_blank"><img onmouseover=clearAuto();
                      onmouseout=setAuto() height=454
                      src="http://mat1.qq.com/lady/images/index/2008/11/23/f2.jpg" width=240 border=0></a></div>
             
            <div style="display: none"><A href="http://lady.qq.com/a/20081202/000031.htm" target=_blank><img onmouseover=clearAuto();
                      onmouseout=setAuto() height=454
                      src="http://mat1.qq.com/lady/images/index/2008/12/02/hot3.jpg" width=240 border=0></A></div>

            <div style="display: none"><a href="http://lady.qq.com/a/20081202/000013.htm" target=_blank><img onmouseover=clearAuto();
                      onmouseout=setAuto() height=454
                      src="http://mat1.qq.com/lady/images/index/2008/12/02/hot4.jpg" width=240 border=0></a></div>
          </div></td>
        </tr>
        <tr>
          <td height=99 valign="top"> <table border=0 align=center cellPadding=0 cellSpacing=1 id=num>      
              <tr>
                
              <td class="woon" onmouseover=clearAuto(); onclick=Mea(0); onmouseout=setAuto()
                               ><img src="http://mat1.qq.com/lady/images/index/2008/12/02/hot01.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20081202/000001.htm','','')"></td>
                
              <td class="wooff" onmouseover=clearAuto();
                                onclick=Mea(1); onmouseout=setAuto()
                               ><img src="http://mat1.qq.com/lady/images/index/2008/11/23/s2.jpg" width="57" height="90" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/zt/2008/damingxing/index.htm','','')"></td>

               <td class="wooff" onmouseover=clearAuto();
                                onclick=Mea(2); onmouseout=setAuto()
                               ><img src="http://mat1.qq.com/lady/images/index/2008/12/02/hot03.jpg" width="57" height="90" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20081202/000031.htm','','')"></td>
                
              <td class="wooff" onmouseover=clearAuto();
                                onclick=Mea(3); onmouseout=setAuto()
                               ><img src="http://mat1.qq.com/lady/images/index/2008/12/02/hot04.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20081202/000013.htm','','')"></td>
         
          </table></td>
        </tr>
    </table>
    <script>
    var n=0;
    var showNum = document.getElementById("num");
    function Mea(value){
        n=value;

        setBg(value);

        plays(value);

        }
    function setBg(value){
        for(var i=0;i<4;i++)
       if(value==i){
            showNum.getElementsByTagName("td")[i].className='woon';
            }
        else{   
            showNum.getElementsByTagName("td")[i].className='wooff';
            } 
        }
    function plays(value){
        with (fc){
            filters[0].Apply();
            for(i=0;i<4;i++)i==value?children[i].style.display="block":children[i].style.display="none";
            filters[0].play();        
            }   
    }
    function clearAuto(){clearInterval(autoStart)}
    function setAuto(){autoStart=setInterval("auto(n)", 5000)}
    function auto(){
        n++;
        if(n>3)n=0;
        Mea(n);
    }
    function sub(){
        n--;
        if(n<0)n=3;
        Mea(n);
    }
    setAuto();
    </script>
    本篇文章出自『一路聆听,有你有我』:http://www.wlzxy.com/blog/article.asp?id=54 转载请保留此声明!

  • 相关阅读:
    char , varchar和Nvarchar区别
    练习2-11 计算分段函数[2] (10 分)
    练习2-10 计算分段函数[1] (10 分)
    练习2-9 整数四则运算 (10 分)
    练习2-8 计算摄氏温度 (10 分)
    练习2-6 计算物体自由下落的距离 (5 分)
    练习2-4 温度转换 (5 分)
    练习2-3 输出倒三角图案 (5 分)
    MySQL之Xtrabackup备份与恢复
    MySQL中show语法
  • 原文地址:https://www.cnblogs.com/wuhuisheng/p/1925723.html
Copyright © 2011-2022 走看看