Code for 21cn js image switching effect

Source: Internet
Author: User
Tip: you can modify some code before running

<!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>Untitled Document</title> <style type="text/css">Http://www.111cn.net/js_a/73/#Layer2 {position: absolute; width: 302px; height: 115px; z-index: 2; top: 350px; left: 0px;} http://www.111cn.net/js_a/73/#Layer4 {position: absolute; width: 280px; height: 400px; z-index: 1; top: 0px; left: 9px ;}http://www.111cn.net/js_a/73/#Layer5 {position: absolute; width: 200px; height: 115px; z-index: 2 ;} the http://www.111cn.net/js_a/73/#Layer6 {position: absolute; width: 302px; height: 488px; z-index: 3 ;}</style><link href="http://et.21cn.com/new/images/2007et.css" rel="stylesheet" type="text/css"> <link href="http://www.21cn.com/other/nav/common.css" rel="stylesheet" type="text/css" /></head><body><table width="302" height="488" border="0" cellpadding="0" cellspacing="0" background="http://et.21cn.com/new/images/p14.gif"> <tr> <td valign="top"><div id="Layer6"> <div id="Layer4"> <TABLE cellSpacing=0 width=280> <TBODY> <TR> <TD vAlign=top bgcolor="http://www.111cn.net/js_a/73/#000000" ><SCRIPT language=javascript type=text/javascript> <!--/* Data begin */var sPicArr = new Array();sPicArr[0] = new Array("http://img001.photo.21cn.com/photos/album/20080714/o/F3CA1566542B80C1B17AB9C4754EAB23.jpg","谢霆锋秀与柏芝甜蜜照","  为免相机中的私密照外泄,霆锋将电脑交助手保管,并禁止记者拍照……","http://et.21cn.com/star/zhuixing/gangtai/2008/07/14/4941883.shtml");sPicArr[3]= new Array("http://img001.photo.21cn.com/photos/album/20080714/o/CD18BA12BC72B44822C6B7C0E5A965D0.jpg","张韶涵爆肥6公斤面目全非","  一向骨感的张韶涵变胖了,不仅小腹变凸、手臂变粗、就连下巴都多了一圈肉……","http://et.21cn.com/picture/");sPicArr[1] = new Array("http://img001.photo.21cn.com/photos/album/20080714/o/AAF5F6F6901E77524F013A946461C087.jpg","魔幻片《画皮》时代背景定汉朝","  即将于9月28日上映的东方新魔幻电影《画皮》,日前又曝光新剧照……","http://et.21cn.com/movie/");sPicArr[2] = new Array("http://img001.photo.21cn.com/photos/album/20080714/o/2B2C45247DE4DF8E08A54E2D995F2C68.jpg","新《红楼》湘云宝琴香菱薛蟠亮相","  新《红楼梦》再公布4个角色造型:香菱、薛蟠、大小薛宝琴、大小史湘云……","http://et.21cn.com/tv/");sPicArr[4]= new Array("http://img001.photo.21cn.com/photos/album/20080714/o/878C85EA8AB7CA406E87756891D5FF0C.jpg","勇敢“出柜”的同性恋明星","  “出柜”是同性恋圈子中的专有名词,意思是向公众公开自己的同性恋取向……","http://et.21cn.com/show/");/* Data end */function GetObj(objName){if(document.getElementById){return eval('document.getElementById("' + objName + '")');}else if(document.layers){return eval("document.layers['" + objName +"']");}else{return eval('document.all.' + objName);}}var plPic = new Image();var gIndex = 0;function SlidePic(index){gIndex = index;//patch by dorian 1017if ('Microsoft Internet Explorer' == navigator.appName){document.images["slidePic"].filters.item(0).Apply();}document.images["slidePic"].src = sPicArr[index][0];document.images["slidePic"].alt = sPicArr[index][1];GetObj("slidePicLink").href = sPicArr[index][3];GetObj("slideTitle").innerHTML = sPicArr[index][1];GetObj("slideDesc").innerHTML = sPicArr[index][2];GetObj("slideLink").innerHTML = "[全文]";if((index+1)<sPicArr.length) plPic.src = sPicArr[index+1][0];//preload;for(var i=0;i<sPicArr.length;i++){GetObj("item"+i).className = "itemOff";GetObj("item"+i).onmouseover = function(){return false;}GetObj("item"+i).onmouseout = function(){return false;}}GetObj("item"+index).className = "itemOn";if ('Microsoft Internet Explorer' == navigator.appName){document.images["slidePic"].filters.item(0).play();}}function NextPic(){gIndex = ((gIndex+1)>=sPicArr.length?0:(gIndex+1));SlidePic(gIndex);}function PrevPic(){//alert(gIndex);gIndex = ((gIndex-1)<0?(sPicArr.length-1):(gIndex-1));//alert(gIndex);SlidePic(gIndex);}var sid;function inislide(){if(sid==null) sid = setInterval('NextPic()', 3000);//fixed by AmourGUO, 051017}function pauseslide(){clearInterval(sid);sid = null;}//--> </sCRIPT> </tD> </tR> </tBODY> </tABLE> <TABLE width=280 height="400" align="center" cellSpacing=0> <TBODY> <TR> <TD height=400 align=middle valign="top" > <SCRIPT>Document. getElementById ("slidePic"). src = sPicArr [0] [0];</sCRIPT> <SCRIPT>Document. getElementById ("slidePicLink"). href = sPicArr [0] [3];</sCRIPT></tD> </tR> <TR> </tR> </tBODY> </tABLE> </div> <div id="Layer5"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cabhttp://www.111cn.net/js_a/73/#version=7,0,19,0" width="302" height="488"> <param name="movie" value="http://et.21cn.com/new/images/bp.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent"> <embed src="http://et.21cn.com/new/images/bp.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="302" height="488"></embed> </object> </div> <div id="Layer2" > <table width="270" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="24" class="link14bl3">Explosive News</td> </tr> </table> <TABLE width=270 border="0" align=center cellpadding="0" cellSpacing=0 onmouseover=pauseslide() onmouseout=inislide()> <TR> <TD align=left></tD> <TD width=120><SCRIPT language=javascript type=text/javascript><!--document.writeln("<table width=100% cellspacing=0>");document.writeln("<tr>");document.writeln("<td > </td>");document.writeln("<td id='item0' width=11 height=11 class=itemOn onClick='SlidePic(0)'>1</td>");for(var i=1;i<sPicArr.length;i++){document.writeln("<td> </td>");document.writeln("<td id='item"+i+"' width=11 height=11 class=itemOff onClick='SlidePic("+i+");'>"+(i+1)+"</td>");//fixed by AmourGUO, 051017}document.writeln("<td> </td>");document.writeln("</tr>");document.writeln("</table>");//--> </sCRIPT></tD> <TD align=left width=146></tD> </tR> </tABLE> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="9"></td> </tr> </table> <TABLE width=270 align="center" cellSpacing=0> <TBODY> <TD class=left1 onmouseover=pauseslide(); onmouseout=inislide(); height=64><DIV class=link14w2 id=slideTitle >Xie Yifeng and Bai Zhi</dIV> <DIV class=underline3b ><SPAN id=slideDesc>In order to avoid leakage of private photos in the camera, Ma Feng handed the computer to his assistant for safekeeping and prohibited reporters from taking photos ......</sPAN> <SPAN id=slideLink>[Full Text]</sPAN></dIV></tD> </tR> </tABLE> </div> </div></td> </tr> </table></body></html>
Tip: you can modify some code before running

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.