含标题、文字摘要介绍的图片展示效果
<!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>含标题、文字摘要介绍的图片展示效果</title> <style type="text/css"> <!-- a:link {color:#fff;text-decoration:none;} a:visited {color:#fff; text-decoration:none;} a:hover {color:#ffc;text-decoration:underline;} .ft {width:15px;height:15px;border:#d3d4d6 1px solid;font-size:11px;font-family: Arial;text-align:center;float:left;} .itemOn {cursor:default;background:#f40003;} .itemOff {cursor:pointer;background:#fff;} --> </style> </head> <body> <script type="text/javascript"> <!-- /* Data begin */ var sPicArr = new Array(); sPicArr[0] = new Array( "http://web.syku.net/UploadFiles_5065/200712/20071203133708286.jpg", "北京500警力清查出租屋 至少800人被带回审查", " 荷枪实弹的警员将可疑人员带回审查……", "http://www.syku.net" ); sPicArr[2] = new Array( "http://web.syku.net/UploadFiles_5065/200712/20071203133711914.jpg", "世界最大客机空客A380成功降落广州机场", " 世界上最大的客机空客A380，今日13时成功降落在广州白云国际机场……", "http://www.syku.net" ); sPicArr[4] = new Array( "http://web.syku.net/UploadFiles_5065/200712/20071203133711211.jpg", "重庆造无人直升机在北京试飞成功", " “重庆造”无人驾驶直升机试飞（小图）；大小规格不同的无人驾驶直升机样机（大图）……", "http://www.syku.net" ); sPicArr[1] = new Array( "http://web.syku.net/UploadFiles_5065/200712/20071203133712865.jpg", "台湾公共场所张贴“禁止性骚扰”标章", " 从十一月二十一日开始，台湾各办公场所和公共场所将张贴“禁止性骚扰”的标章……", "http://www.syku.net" ); sPicArr[3] = new Array( "http://web.syku.net/UploadFiles_5065/200712/20071203133712417.jpg", "南京警察技能比武 玄奘寺住持体验射击", " 来自玄奘寺的住持“传真”法师平生第一次端起冲锋枪进行了实弹射击……", "http://www.syku.net" ); /* 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 1017 if ('Microsoft Internet Explorer' == navigator.appName) { document.images["slidePic"].filters[0].transition=23; 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 = "[<a href='"+sPicArr[index][3]+"' target='_blank' title='全文'>全文</a>]"; 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 ft"; GetObj("item"+i).onmouseover = function(){return false;} GetObj("item"+i).onmouseout = function(){return false;} } GetObj("item"+index).className = "itemOn ft"; 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()', 6000);//fixed by AmourGUO, 051017 } function pauseslide() { clearInterval(sid); sid = null; } //--> </script> <table width="284" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding:10px;background:#636363;text-align:center;"><a id="slidePicLink" href="http://www.syku.net" target="_blank"><img id="slidePic" onmouseover="pauseslide();" onmouseout="inislide();" style="border:4px #bab6b7 solid;filter: revealtrans(duration=2.0,transition=12);" alt="北京500警力清查出租屋 至少800人被带回审查" src="http://web.syku.net/UploadFiles_5065/200712/20071203133708286.jpg" border="0" name="slidePic"></a> <script type="text/javascript">document.getElementById("slidePic").src=sPicArr[0][0];</script> <script type="text/javascript">document.getElementById("slidePicLink").href=sPicArr[0][3];</script></td> </tr> <tr> <td style="background:#000;"><table width="96%" border="0" cellspacing="0" cellpadding="0" onmouseover="pauseslide()" onmouseout="inislide()"> <tr> <td width="42%" align="right"><span style="font:18px/150% webdings;color:#fff;cursor:pointer;" onclick="PrevPic();pauseslide();inislide()" title="上一张">7</span></td> <td width="49%" align="center"><script type="text/javascript"> <!-- document.writeln("<div id='item0' class='itemOn ft' onclick='SlidePic(0)' style='margin:0 6px;'>1</div>"); for(var i=1;i<sPicArr.length;i++){ document.writeln("<div id='item"+i+"' class='itemOff ft' onClick='SlidePic("+i+");' style='margin:0 6px 0 0;'>"+(i+1)+"</div>"); //fixed by AmourGUO, 051017 } //--> </script></td> <td width="9%"><span style="font:18px/150% webdings;color:#fff;cursor:pointer;" onclick="NextPic();pauseslide();inislide()" title="下一张">8</span></td> </tr> </table></td> </tr> <tr> <td height="1" style="background:#333;"></td> </tr> <tr> <td height="1" style="background:#000;"></td> </tr> <tr> <td style="padding:6px;background:#333;color:#fff;font-size:12px;" onmouseover="pauseslide();" onmouseout="inislide();"><div id="slideTitle" style="font-weight:bold">北京500警力清查出租屋 至少800人被带回审查</div><div style="margin-top:7px"><span id="slideDesc"> 荷枪实弹的警员将可疑人员带回审查……</span> <span id="slideLink">[<a href="http://news.qq.com/a/20061122/000414.htm" target="_blank">全文</a>]</span></div></td> </tr> </table> </body> </html> [ 可先修改部分代码 再运行查看效果 ]
