天狼星

带标题、摘要文字介绍的图片展示效果

2007年1月25日 | 分类: D/XHTML CSS | 标签:

HTML代码

<!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://img1.qq.com/news/pics/2238/2238037.jpg", "北京500警力清查出租屋 至少800人被带回审查", "　　荷枪实弹的警员将可疑人员带回审查……", "http://www.5dm.cn/bbs" ); sPicArr[2] = new Array( "http://img1.qq.com/news/pics/2239/2239439.jpg", "世界最大客机空客A380成功降落广州机场", "　　世界上最大的客机空客A380，今日13时成功降落在广州白云国际机场……", "http://www.5dm.cn/bbs" ); sPicArr[4] = new Array( "http://img1.qq.com/news/pics/2232/2232739.jpg", "重庆造无人直升机在北京试飞成功", "　　“重庆造”无人驾驶直升机试飞（小图）；大小规格不同的无人驾驶直升机样机（大图）……", "http://www.5dm.cn/bbs" ); sPicArr[1] = new Array( "http://img1.qq.com/news/pics/2233/2233384.jpg", "台湾公共场所张贴“禁止性骚扰”标章", "　　从十一月二十一日开始，台湾各办公场所和公共场所将张贴“禁止性骚扰”的标章……", "http://www.5dm.cn/bbs" ); sPicArr[3] = new Array( "http://img1.qq.com/news/pics/2235/2235961.jpg", "南京警察技能比武 玄奘寺住持体验射击", "　　来自玄奘寺的住持“传真”法师平生第一次端起冲锋枪进行了实弹射击……", "http://www.5dm.cn/bbs" ); /* 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.5dm.cn/bbs" 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://img1.qq.com/news/pics/2238/2238037.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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

发表评论 | Trackback

目前还没有任何评论.

您必须在登录后才能发布评论.

2012 年二月

一二三四五六日

« 六

1 2 3 4 5

6 7 8 9 10 11 12

13 14 15 16 17 18 19

20 21 22 23 24 25 26

27 28 29
分类目录
- AJAX JS
- Android
- ARTICLE
- ASP
- COMPUTER
- D/XHTML CSS
- DB
- DESIGN
- FLASH
- JAVA
- network
- PHP
- SYSTEM
- 未分类
功能
- 注册
- 登录
- 文章 RSS
- 评论 RSS
- WordPress.org
标签
北京纪事对白开源程序房地产经济正则男人必读编码老婆股市经济项目管理 mingle ajax apache AVAYA cisco pix515e css CTI flex HTTP JAVA javascript memcached php Mysql PHP php qq sns Server Server Monitor sns flash 多图上传 VDN

2012 年二月
一	二	三	四	五	六	日
« 六
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29

« 各类Http请求状态(status)及其含义 IE地址栏 — 有趣的代码 »

置顶

带标题、摘要文字介绍的图片展示效果

分类目录

功能

标签