http://www.corange.cn/archives/2008/09/1795.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=utf-8" />
<title>八张图片展示焦点图</title>
<style type="text/javascript">
img{border:none;}
</style>
</head>
<body>
<div class="aL">
<div style="width:450px;margin:15px auto;">
<!--图片播放器Begin-->
<style>
.imgBox{width:450px;height:300px;margin:4px auto auto;position:relative;}
.imgBox .blackBox{bottom:0;left:0;width:100%;height:32px; background:#000;position:absolute;filter:alpha(opacity=40);opacity:0.6;z-index:100;}
.imgBox .picImg{display:block;FILTER: revealTrans(duration=1,transition=23);}
.imgBox .titleBox{bottom:0;left:0;width:100%;height:32px; position:absolute;z-index:300;color:#fff;line-height:16px; overflow:hidden;}
.imgBox h1{text-align:center;margin-top:5px;}
.imgBox h1 a,.imgBox h1 a:visited,.imgBox h1 a:hover{color:#fff;font-size:14px;}
.imgBoxBtn{padding-top:6px;}
.btnArea{float:left;}
.btnArea .numArea{float:left; }
.numArea a{float:left;width:16px;height:16px;font-size:10px;background:url(http://i2.sinaimg.cn/dy/shen7/photo/images/ss_cl_029.gif) no-repeat;text-align:center;margin-left:9px;color:#999;text-decoration:none;line-height:16px;font-family:"Arial","verdana"; }
.numArea a:hover{text-decoration:none;}
.numArea a.cur,numArea a.cur:hover{background:#000;color:#999;}
.btnArea .playArea{float:right;width:92px;margin-top:8px;}
.btnArea a.prv{float:left;width:16px;height:16px;margin-left:0px;background:url(http://i2.sinaimg.cn/dy/shen7/photo/images/ss_cl_029.gif) no-repeat 0 -100px; }
.btnArea a.next{float:left;width:16px;height:16px;margin-left:0px;background:url(http://i2.sinaimg.cn/dy/shen7/photo/images/ss_cl_029.gif) no-repeat 0 -200px;margin-left:8px;display:inline;}
a.pause{background:url(http://i2.sinaimg.cn/dy/shen7/photo/images/ss_cl_029.gif) 100% -300px no-repeat;padding-right:20px;line-height:16px; height:16px;text-align:center;display:block; float:right;overflow:hidden; color:#878787; text-decoration:none; }
a.pause:hover, a.pause:active{ color:#ddd;}
</style>
</style>
<div class="imgBox">
<a href="url" target="_blank"id="picUrl"><img src="" width="450" height="300" alt="" class="picImg" id="picImg" /></a>
<div class="blackBox" id="blackBox"></div>
<div class="titleBox" id="titleBox">
<h1 id="titleArea"><a href="url" target="_blank">文字</a></h1>
</div>
</div>
<div class="imgBoxBtn">
<div class="btnArea">
<a href="javascript:autoPicPlay(-1)" class="prv"></a>
<div class="numArea" id="numLink">
<a href="url" target="_blank">5</a> <a href="url" target="_blank">4</a> <a href="url" target="_blank">3</a> <a href="url" target="_blank">2</a> <a href="url" target="_blank" class="cur">1</a>
</div>
<a href="javascript:autoPicPlay(1)" class="next"></a>
<div class="clearit"></div>
</div>
<a href="javascript:Pause()" class="pause">暂停播放</a>
</div>
<script language="javascript">
//<![CDATA[
var $=function(objName)
{
if(document.getElementById)
{
return eval('document.getElementById("'+objName+'")')
}
else
{
return eval('document.all.'+objName)
}
}
function picData(pTitle,pImgSrc,pUrl)
{
this.title=pTitle;
this.imgSrc=pImgSrc;
this.url=pUrl;
this.showTitle=picData_doTitle;
}
function picData_doTitle()
{
var titleHtml="";
titleHtml="<a href='"+this.url+"' target='_blank' class='f14white'>"+this.title+"</a>";
return titleHtml;
}
var picArr=new Array();
//焦点图1
picArr[0]=new picData();
picArr[0].title="夜色中的神七船箭塔组合体";
picArr[0].imgSrc="01.jpg";
picArr[0].url="#";
//焦点图2
picArr[1]=new picData();
picArr[1].title="高清图：长征2号F运载火箭";
picArr[1].imgSrc="02.jpg";
picArr[1].url="# ";
//焦点图3
picArr[2]=new picData();
picArr[2].title="高清图：神舟七号海上保障船集结上海港";
picArr[2].imgSrc="03.jpg";
picArr[2].url="#";
//焦点图4
picArr[3]=new picData();
picArr[3].title="幻灯：探访神七发射基地";
picArr[3].imgSrc="04.jpg";
picArr[3].url="#";
//焦点图5
picArr[4]=new picData();
picArr[4].title="幻灯：中国航天员";
picArr[4].imgSrc="05.jpg";
picArr[4].url="#";
//焦点图6
picArr[5]=new picData();
picArr[5].title="幻灯：神舟七号飞船运输过程";
picArr[5].imgSrc="06.jpg";
picArr[5].url="#";
//焦点图7
picArr[6]=new picData();
picArr[6].title="07.标题";
picArr[6].imgSrc="07.jpg";
picArr[6].url="#";
//焦点图8
picArr[7]=new picData();
picArr[7].title="航天员着舱外航天服模拟失重训练";
picArr[7].imgSrc="08.jpg";
picArr[7].url="#";
//初始化开始
var numHtml=""
var curPicId=0;
for(i=1;i<=picArr.length;i++)
{
loadImg=new Image();
loadImg.src=picArr[(i-1)].imgSrc;
if(i==1)
numHtml+="<a id='picBtn"+(i-1)+"' class='cur' href='javascript:clickPic("+(i-1)+")'>"+i+"</a>";
else
numHtml+="<a id='picBtn"+(i-1)+"' href='javascript:clickPic("+(i-1)+")'>"+i+"</a>";
}
$('numLink').innerHTML=numHtml;
$('picImg').src=picArr[0].imgSrc;
$('picUrl').href=picArr[0].url;
$("titleArea").innerHTML=picArr[0].showTitle();
myPicTime=setInterval(autoPicPlay,5000);
//初始化完成
function doPic(picId)
{
curPicId=picId;
if($('picImg').filters)
{
$('picImg').filters.revealTrans.Transition=23;
$('picImg').filters.revealTrans.apply();
$('picImg').filters.revealTrans.play();
}
$('picImg').src=picArr[picId].imgSrc;
$('picUrl').href=picArr[picId].url;
for(i=0;i<picArr.length;i++)
{
$("picBtn"+i).className=$("picBtn"+i).className.replace('cur','');
}
$("picBtn"+picId).className+=" cur";
$("picBtn"+picId).blur();
$("titleArea").innerHTML=picArr[picId].showTitle();
}
var myPicTime;
function clickPic(cId)
{
clearInterval(myPicTime);
doPic(cId);
myPicTime=setInterval(autoPicPlay,5000);
}
function autoPicPlay(playType)// -1 后退 +1前进
{
if(playType==0 || playType==null)playType=1;
if(playType>0)
{
curPicId++;
if(curPicId>=picArr.length)
{
curPicId=0;
}
}
else
{
curPicId--;
if(curPicId<0)
curPicId=picArr.length-1;
}
doPic(curPicId);
}
function Pause()
{
clearInterval(myPicTime);
}
//]]>
</script>
<!--图片播放器End-->
</div>
</div>
</body>
</html>
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
