大气的Js图片切换特效代码

2012-1-6：：162

：

图片切换特效，非常大气，纯JavaScript实现，效果很不错，超源建站软件用户可自行修改一下图片和链接地址。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <STYLE type=text/css> body{margin: 0px;} A {COLOR: #313131;font-size: 9pt; TEXT-DECORATION: none} A:hover {COLOR: #d7000f; TEXT-DECORATION: underline} </STYLE> </head> <body> <table width="389" border="0" cellspacing="0" cellpadding="0" class="mt13"> <tr> <td height="339" background="http://www.codefans.net/jscss/demoimg/200906/focus_bg.jpg"> <style type="text/css"> .dis{display:block} .undis{display:none} .npim{border:#000 1px solid;} .npim1 img{border:#E5E5E5 3px solid} .nptx3{padding-left:207px;} .nptx3 div{width:21px; line-height:20px; text-align:center; margin-left:3px; float:left;cursor:pointer;} .npfd1{background:url("http://www.codefans.net/jscss/demoimg/200906/f_num_on.gif") no-repeat;} .npfd1 a,.npfd1 a:hover{color:#fff;text-decoration:none;} .npfd2{background:url("http://www.codefans.net/jscss/demoimg/200906/f_num.gif") no-repeat;} </style> <div style="width:376px; height:300px; filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=5,gradientSize=0.5,motion=forward ); margin:6px auto 0" id="fc">  <table width="376" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td class="npim"><a href="/" target="_blank" ><img src="http://img1.qq.com/news/pics/17651/17651743.jpg" width="374" height="300" border="0" /></a></td> </tr> </table>  <table width="378" border="0" align="center" cellpadding="0" cellspacing="0" class="undis"> <tr> <td class="npim"><a href="/" target="_blank" ><img src="http://img1.qq.com/news/pics/17651/17651895.jpg" width="374" height="300" border="0" /></a></td> </tr> </table>  <table width="378" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td class="npim"><a href="/" target="_blank"><img src="http://img1.qq.com/news/pics/17651/17651747.jpg" width="374" height="300" border="0" /></a></td> </tr> </table>  <table width="378" border="0" align="center" cellpadding="0" cellspacing="0" class="undis"> <tr> <td class="npim"><a href="/" target="_blank" ><img src="http://img1.qq.com/news/pics/17651/17651749.jpg" width="374" height="300" border="0" /></a></td> </tr> </table>  <table width="378" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td class="npim"><a href="/" target="_blank" ><img src="http://img1.qq.com/news/pics/17651/17651751.jpg" width="374" height="300" border="0" /></a></td> </tr> </table>  <table width="378" border="0" align="center" cellpadding="0" cellspacing="0" class="undis"> <tr> <td class="npim"><a href="/" target="_blank" ><img src="http://img1.qq.com/news/pics/17651/17651739.jpg" width="374" height="300" border="0" /></a></td> </tr> </table>  <table width="378" border="0" align="center" cellpadding="0" cellspacing="0" class="undis"> <tr> <td class="npim"><a href="/" target="_blank" ><img src="http://img1.qq.com/news/pics/17651/17651741.jpg" width="374" height="300" border="0" /></a></td> </tr> </table> </div> <table width="378" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="3"></td> </tr> <tr> <td class="nptx3" id="num"><div class="npfd1" onmouseover="Mea(0);clearAuto();" onmouseout="setAuto()"><a href="http://www.chinabe.net" target="_blank">1</a></div> <div class="npfd2" onmouseover="Mea(1);clearAuto();" onmouseout="setAuto()"><a href="/" target="_blank">2</a></div> <div class="npfd2" onmouseover="Mea(2);clearAuto();" onmouseout="setAuto()"><a href="/" target="_blank">3</a></div> <div class="npfd2" onmouseover="Mea(3);clearAuto();" onmouseout="setAuto()"><a href="/" target="_blank">4</a></div> <div class="npfd2" onmouseover="Mea(4);clearAuto();" onmouseout="setAuto()"><a href="/" target="_blank">5</a></div> <div class="npfd2" onmouseover="Mea(5);clearAuto();" onmouseout="setAuto()"><a href="/" target="_blank">6</a></div> <div class="npfd2" onmouseover="Mea(6);clearAuto();" onmouseout="setAuto()"><a href="/" target="_blank">7</a></div></td> </tr> </table> <script> var n=0; var showNum = document.getElementById("num"); var fc = document.getElementById("fc"); var week = new Date().getDay(); if(week) {week=week-1;} else { week=6; } ; function Mea(value){ n=value; setBg(value); plays(value); } function setBg(value){ for(var i=0;i<7;i++) if(value==i){ showNum.getElementsByTagName("div")[i].className='npfd1'; } else{ showNum.getElementsByTagName("div")[i].className='npfd2'; } } function plays(value){ with (fc){ filters[0].Apply(); for(i=0;i<7;i++)i==value?getElementsByTagName("table")[i].className="dis":getElementsByTagName("table")[i].className="undis"; filters[0].play(); } } var first=''; var autoStart=''; function clearAuto(){clearInterval(autoStart);} function setAuto(){ clearInterval(first); autoStart=setInterval("auto(n)", 5000) } function auto(value){ n++; if(n>6)n=0; Mea(n); } first=setInterval("setAuto()", 5000); Mea(week); </script>  </td> </tr> </table> </body> </html><p> <span style="font-size: 14px"><span style="color: #2f4f4f">金华超源网络科技有限公司 </span><a data-cke-saved-href="http://jh101.com/" href="http://jh101.com/" target="_blank"><span style="color: #2f4f4f">http://jh101.com/</span></a></span></p>

软件介绍软件功能视频演示

更多网页特效>>

金华市超源网络科技有限公司是一家建站软件开发、网站建设、企业网络推广为主营业务的互联网技术服务公司。以“敬业负责、恪守信誉、积极进取、勇于创新”的经营理念，立足为广大厂家、商家与市场流通之间通过互联网架起信息沟通的的桥梁.；协助商家实施名牌战略，为商品产、供、销提供经济快捷、准确、丰富的信息服务及电子商务服务。

超源1+1专业建站软件可将所有网站功能进行“版块功能组件化”，建站者只需在网站前台（即网站页面）对功能组件进行简单的拖拽、缩放等操作，即可完全按照建站者的构思，建设出专业的网站来。在建站技术上首次实现了所见即所得。