超酷的js图片轮播渐变效果

超酷的js图片轮换/轮播 渐变效果··

来自腾讯

刚刚在腾讯女性频道上看到一个很酷的图片渐变轮换效果···

··于是乎····抠下来了···分享···

js图片轮播效果截图：

完整图片轮播代码如下：

<title>超酷的js图片轮换/轮播 渐变效果 - asp之家 - http//:www.aspxhome.com</title><style type="text/css">.woon{border:1px solid #fff;}.wooff{border:1px solid #ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500,finishOpacity=1);}</style><script language="JavaScript" type="text/JavaScript"><!--window.onerror = function(){return true}function MM_openBrWindow(theURL,winName,features) { //v2.0  window.open(theURL,winName,features);}//--></script><table width=252 border=0 align=center cellPadding=0 cellSpacing=0  background="/file/UploadPic/200710/10/2007101021551223.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/20071007/000003.htm" target=_blank><img onmouseover=clearAuto();                   onmouseout=setAuto() height=454                   src="https://img.aspxhome.com/file/UploadPic/200710/10/2007101021551483.jpg" width=240 border=0></A></div>                  <div style="display: none"><a href="http://lady.qq.com/a/20071007/000009.htm" target="_blank"><img onmouseover=clearAuto();                   onmouseout=setAuto() height=454                   src="https://img.aspxhome.com/file/UploadPic/200710/10/200710102162908.jpg" width=240 border=0></a></div>                  <div style="display: none"><A href="http://lady.qq.com/a/20071007/000005.htm" target=_blank><img onmouseover=clearAuto();                   onmouseout=setAuto() height=454                   src="https://img.aspxhome.com/file/UploadPic/200710/10/200710102163762.jpg" width=240 border=0></A></div>        <div style="display: none"><a href="http://lady.qq.com/a/20071007/000006.htm" target=_blank><img onmouseover=clearAuto();                   onmouseout=setAuto() height=454                   src="https://img.aspxhome.com/file/UploadPic/200710/10/200710102166779.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="https://img.aspxhome.com/file/UploadPic/200710/10/200710102168717.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000003.htm','','')"></td>                       <td class=wooff onmouseover=clearAuto();                             onclick=Mea(1); onmouseout=setAuto()                           ><img src="https://img.aspxhome.com/file/UploadPic/200710/10/200710102169455.jpg" width="57" height="90" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000009.htm','','')"></td>          <td class=wooff onmouseover=clearAuto();                             onclick=Mea(2); onmouseout=setAuto()                             ><img src="https://img.aspxhome.com/file/UploadPic/200710/10/200710102169575.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000005.htm','','')"></td>                       <td class=wooff onmouseover=clearAuto();                             onclick=Mea(3); onmouseout=setAuto()                            ><img src="https://img.aspxhome.com/file/UploadPic/200710/10/2007101021610678.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000006.htm','','')"></td>             </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></body></html>