Picture scrubbing slideshow effects [web page effects]

Author：Eve Cole Update Time：2009-06-20 15:56:34

Web page special effects code, NetEase Academy's news picture switching special effects, with detailed text descriptions, and automatic switching

<!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=gb2312" /> <title>News switching technology</title> <style type="text/css">  </style> </head> <body> <script language="JavaScript" type="text/javascript"> var nn; nn=1; setTimeout('change_img()',6000); function change_img () { if(nn>4) nn=1 setTimeout('setFocus1('+nn+')',6000); nn++; tt=setTimeout('change_img()',6000); } function setFocus1(i) { selectLayer1 (i); } function selectLayer1(i) { switch(i) { case 1: document.getElementById("focusPic1").style.display="block"; document.getElementById("focusPic2").style.display=" none"; document.getElementById("focusPic3").style.display="none"; document.getElementById("focusPic4").style.display="none"; document.getElementById("focusPic1nav").style.display= "block"; document.getElementById("focusPic2nav").style.display="none"; document.getElementById("focusPic3nav").style.display="none"; document.getElementById("focusPic4nav").style.display ="none"; break; case 2: document.getElementById("focusPic1").style.display="none"; document.getElementById("focusPic2").style.display="block"; document.getElementById("focusPic3 ").style.display="none"; document.getElementById("focusPic4").style.display="none"; document.getElementById("focusPic1nav").style.display="none"; document.getElementById(" focusPic2nav").style.display="block"; document.getElementById("focusPic3nav").style.display="none"; document.getElementById("focusPic4nav").style.display="none"; break; case 3 : document.getElementById("focusPic1").style.display="none"; document.getElementById("focusPic2").style.display="none"; document.getElementById("focusPic3").style.display="block "; document.getElementById("focusPic4").style.display="none"; document.getElementById("focusPic1nav").style.display="none"; document.getElementById("focusPic2nav").style.display=" none"; document.getElementById("focusPic3nav").style.display="block"; document.getElementById("focusPic4nav").style.display="none"; break; case 4: document.getElementById("focusPic1") .style.display="none"; document.getElementById("focusPic2").style.display="none"; document.getElementById("focusPic3").style.display="none"; document.getElementById("focusPic4" ).style.display="block"; document.getElementById("focusPic1nav").style.display="none"; document.getElementById("focusPic2nav").style.display="none"; document.getElementById("focusPic3nav ").style.display="none"; document.getElementById("focusPic4nav").style.display="block"; break; } } </script> <div class="focusPic"> <div id="focusPic1 " style="display:block ;"> <div class="pic"> <a href="http://www.downcodes.com"><img src="/u/info_img/2009-06/20/ 7867_2006011810122068706.jpg" alt="NetEase Academy 2005 Software Selection Results" width="240" height="180" border="0" /></a> </div> <h2><a href="http: //www.downcodes.com">NetEase Academy's 2005 software selection results</a></h2> <p>After everyone's enthusiastic voting and our hard work, the results of NetEase Academy's 2005 annual software selection are finally out. Click to view...<img src="/newimg/i2.gif" alt="Details" width="3" height="5" /> <a href="http://www.downcodes.com" class ="cDRed">Details</a></p> </div> <div id="focusPic2" style="display: none ;"> <div class="pic"> <a href="http:/ /www.downcodes.com"><img src="/u/info_img/2009-06/20/5724_200601171557008cee7.jpg" alt="Subversion of the survival laws of jungle animals" width="240" height="180" border=" 0" /></a> </div> <h2><a href="http://www.downcodes.com">Subverting the survival laws of jungle animals</a></h2> <p>Social animals This behavior subverts what we usually think of as the "law of the jungle" that prevails in the animal world. Animals are not all selfish or predatory. <img src="/newimg/i2.gif" alt="Details" width="3" height="5" /> <a href="http://www.downcodes.com" class="cDRed"> Details</a></p> </div> <div id="focusPic3" style="display: none ;"> <div class="pic"> <a href="http://www.downcodes. com"><img src="/u/info_img/2009-06/20/6541_2006011711483290a60.jpg" alt="WAPI is not a trade conspiracy" width="240" height="180" border="0" /></ a> </div> <h2><a href="http://www.downcodes.com">WAPI is not a trade conspiracy</a></h2> <p>Recently, the country has made a decision: "It will Domestic and foreign companies have announced the algorithm." Facts have proved that China's WAPI standard is not a trade conspiracy. <img src="/newimg/i2.gif" alt="Details" width="3" height="5" /> <a href="http://www.downcodes.com" class="cDRed"> Details</a></p> </div> <div id="focusPic4" style="display: none ;"> <div class="pic"> <a href="http://www.downcodes. com"><img src="/u/info_img/2009-06/20/6650_200601171002503f251.jpg" alt="Special topic on New Horizons' exploration of Pluto" width="240" height="180" border="0" / ></a> </div> <h2><a href="http://www.downcodes.com">Special special feature on New Horizons' exploration of Pluto</a></h2> <p>NASA will The New Horizons probe was launched at 2:24 a.m. on the 18th, Beijing time, to visit Pluto, the only planet that has not yet been explored by humans. <img src="/newimg/i2.gif" alt="Details" width="3" height="5" /> <a href="http://www.downcodes.com" class="cDRed"> Details</a></p> </div> <div class="more"> <div class="textNum"> <div class="text">> More headline news</div> <div class="num bg1" id="focusPic1nav" style="display: block;"> <ul> <li>1</li> <li><a href="javascript:setFocus1(2);" target=" _self">2</a></li> <li><a href="javascript:setFocus1(3);" target="_self">3</a></li> <li><a href= "javascript:setFocus1(4);" target="_self">4</a></li> </ul> </div> <div class="num bg2" id="focusPic2nav" style="display: none;"> <ul> <li><a href="javascript:setFocus1(1);" target="_self">1</a></li> <li>2</li> <li>< a href="javascript:setFocus1(3);" target="_self">3</a></li> <li><a href="javascript:setFocus1(4);" target="_self">4 </a></li> </ul> </div> <div class="num bg3" id="focusPic3nav" style="display: none;"> <ul> <li><a href="javascript :setFocus1(1);" target="_self">1</a></li> <li><a href="javascript:setFocus1(2);" target="_self">2</a>< /li> <li>3</li> <li><a href="javascript:setFocus1(4);" target="_self">4</a></li> </ul> </div> <div class="num bg4" id="focusPic4nav" style="display: none;"> <ul> <li><a href="javascript:setFocus1(1);" target="_self">1</ a></li> <li><a href="javascript:setFocus1(2);" target="_self">2</a></li> <li><a href="javascript:setFocus1(3 );" target="_self">3</a></li> <li>4</li> </ul> </div> </div> </div> </div> </body> </html>