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

作者：佚名来源：互联网文章点击数：

<!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">

</style>
</head>
<body>
<script type="text/javascript">
<!--
/* Data begin */
var sPicArr = new Array();
sPicArr[0] = new Array(
"/Upfiles/BeyondPic/2008-07/2008714532473892.jpg",
"北京500警力清查出租屋至少800人被带回审查",
"　　荷枪实弹的警员将可疑人员带回审查……",
"http://www.syku.net"
);
sPicArr[2] = new Array(
"/Upfiles/BeyondPic/2008-07/2008710708788039.jpg",
"世界最大客机空客A380成功降落广州机场",
"　　世界上最大的客机空客A380，今日13时成功降落在广州白云国际机场……",
"http://www.syku.net"
);
sPicArr[4] = new Array(
"/Upfiles/BeyondPic/2008-07/2008712767311169.jpg",
"重庆造无人直升机在北京试飞成功",
"　　“重庆造”无人驾驶直升机试飞（小图）；大小规格不同的无人驾驶直升机样机（大图）……",
"http://www.syku.net"
);
sPicArr[1] = new Array(
"/Upfiles/BeyondPic/2008-07/2008710981836314.jpg",
"台湾公共场所张贴“禁止性骚扰”标章",
"　　从十一月二十一日开始，台湾各办公场所和公共场所将张贴“禁止性骚扰”的标章……",
"http://www.syku.net"
);
sPicArr[3] = new Array(
"/Upfiles/BeyondPic/2008-07/2008713812664184.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="/Upfiles/BeyondPic/2008-07/2008714532473892.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">

</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>

Tags:图片展示特效

上一篇：Marquee 原来也可以这么用
下一篇：用Javascript +CSS实现脚注(Footnote)效果

·仿windows选项卡效果拾零	07-15
·符合Firefox的,以图片代替滚动条效果	07-14
·模仿JQ的UI-TAB控件,兼容多浏览器	07-12
·一个背景变暗的div可拖动提示窗口，兼容IE、Firefox、	07-11
·非常不错的一个DIV+CSS客齐集的导航特效	07-10
·非常经典的不用图片实现圆角代码	07-09
·如何实现浏览器上的右键菜单	07-08
·网页中实用的中英文日历网页特效代码	07-07

热门浏览

·快速实用的人物磨皮及美白方法	05-31
·用Photoshop简单打造毛笔字效果	03-15
·扩展你的思维--影子的创意	03-19
·Photoshop制作一颗中国水晶心	04-21
·国外优秀场景CG设计欣赏	03-21
·实例详细讲解ASP生成静态页面方	03-15
·汶川地震报道超强震撼版式	05-19
·新加坡设计师Charlene Chua作品	03-17
·PS制作彩色流线字效果	03-19
·很朦胧很震撼的人体摄影	03-15
·Photoshop把美女照片制作成拼图	04-19
·世界媒体密集报道中国地震灾情	05-20
·贵妇人挑逗你的欲望极限！（一	03-21
·仿阿里妈妈首页图片轮换广告代	03-19

编辑推荐

·凌乱中的完美韵律 Barral Fabi	07-14
·关于DNS服务器的配置问题	07-11
·雅虎站点管理器如何提升网站流	07-10
·不走寻常路的日历设计（二）	07-09
·高质量的页面摘要（Snippet）赏	07-09
·四大站长论道个人网站的发展	06-30
·社交网络(SNS)：内容、通讯、关	06-27
·Redoffice.cn的域名保卫战	06-26
·搜索引擎统一Robots文件标准	06-24
·08欧洲设计奖-企业标识类	06-23
·T-shirt:以艺术为名	06-21
·功夫熊猫预热，桌面全集抢先下	06-20
·一个实用的小图弹大图的js图片	06-20
·百度“观察盒”原理分析	06-20