超酷的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="/article/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="/article/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="/article/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="/article/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="/article/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="/article/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="/article/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="/article/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="/article/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> [提示：你可先修改部分代码，再按运行]