<!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>
img{border:0px}
.chinaz{width:380px;height:60px}
#page_left_1 {WIDTH: 378px; }
#page_left_2 {WIDTH: 380px}
#page_left_2_1 {FONT-WEIGHT: normal; FLOAT: left; BACKGROUND-IMAGE: url(/jscss/demoimg/200908/p_12_02.jpg); WIDTH: 74px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
#page_left_2_1_1 {FONT-WEIGHT: normal; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 5px; TEXT-ALIGN: center}
#page_left_2_1_2 {FONT-WEIGHT: normal; WIDTH: 74px; COLOR: #ffffff; PADDING-TOP: 5px; TEXT-ALIGN: center}
#page_left_2_2 {FONT-WEIGHT: normal; FLOAT: left; BACKGROUND-IMAGE: url(/jscss/demoimg/200908/p_12_04.jpg); WIDTH: 74px; COLOR: #ffffff; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty20 {FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; BACKGROUND-IMAGE: url(/jscss/demoimg/200908/p_12_02.jpg); WIDTH: 74px;LINE-HEIGHT: 20px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty21 {FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; BACKGROUND-IMAGE: url(/jscss/demoimg/200908/p_12_05.jpg); WIDTH: 74px; COLOR: #ffffff; LINE-HEIGHT: 20px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty21 #page_left_2_1_1 {BACKGROUND-POSITION: center top; BACKGROUND-IMAGE: url(/jscss/demoimg/200908/p_12_03.gif); BACKGROUND-REPEAT: no-repeat}
</style>
</head>
<body>
<DIV align="center" ><br /><br />
<SCRIPT language=javascript>
<!--
var imgUrl=new Array();
var imgLink=new Array();
var label = new Array();
imgUrl[1]="/jscss/demoimg/200908/01.jpg";
imgLink[1]="/";
label[1] = "圖片一";
imgUrl[2]="/jscss/demoimg/200908/02.jpg";
imgLink[2]="/";
label[2] = "圖片二";
imgUrl[3]="/jscss/demoimg/200908/03.jpg";
imgLink[3]="//";
label[3] = "圖片三";
imgUrl[4]="/jscss/demoimg/200908/04.jpg";
imgLink[4]="/";
label[4] = "圖片四";
imgUrl[5]="/jscss/demoimg/200908/02.jpg";
imgLink[5]="/";
label[5] = "圖片五";
var num_pic =5;
var label_width = 380/num_pic-2;
var focusPicNumSrc="//";
var time1 = 3; //打開頁面等待圖片載入的時間
var time2 = 4; //圖片輪轉間隔時間
var timeout1 = time1*1000;
var timeout2 = time2*1000;
var jumpUrl = '';
var nn=1;//初始焦點
var curFileNum = 1;//傳遞給myPlayer對象 表示目前焦點序列值
document.write('<style>');
document.write('.focusPic {border:1px #333333 solid; OVERFLOW: hidden; WIDTH: 378px; POSITION: relative; HEIGHT: 213px}');
document.write('.focusPicNum {Z-INDEX: 99; right: 0px; POSITION: absolute; TOP: 190px;MARGIN: 3px}');
document.write('</style>');
if(navigator.appName == "Microsoft Internet Explorer"){
setTimeout('change_img()',timeout1);
}
function change_img(){
if(nn>num_pic) nn=1;
setTimeout('setFocus2('+nn+')',timeout1);
nn++;
tt=setTimeout('change_img()',timeout2);
}
function setFocus2(i){
jumpUrl=imgLink[i];
curFileNum = i;
selectLayer1(i);
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply();
playTran();
document.images.imgInit.src=imgUrl[i];
}
function setFocus1(i){
nn = i;
ln=i;
curFileNum = i;
selectLayer1(i);
setFocus2(i);
}
function selectLayer1(i){
for (a=1;a<num_pic+1;a++ ){
var obj = GetObj('label_'+a);
obj.className='sty20';
obj.style.width=label_width;
}
var obj = GetObj('label_'+i);
obj.className='sty21';
obj.style.width=label_width;
}
function goUrl(){
ln=nn;
if (ln ==1)if (jumpUrl!='') jumpUrl=imgLink[ln];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function playTran(){
if (document.all)imgInit.filters.revealTrans.play();
}
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);
}
}
//-->
</SCRIPT>
<DIV class=focusPic id=focusPic>
<SCRIPT language=JavaScript>
<!--
document.write('<DIV class=focusPicNum style=display:none>');
for (i=1;i<num_pic+1;i++ )
{
document.write('<A href=javascript:setFocus1('+i+');><IMG height=15 src='+focusPicNumSrc+'/bn_focus_num_ws_0'+i+'off.gif width=23 border=0 name=fi_'+i+'></A>');
}
document.write('</DIV>');
document.write('<div id="page_left_1">');
document.write('<a id="PicLink" href="javascript:goUrl()"><img src="'+imgUrl[1]+'" width=378 name=imgInit height="213" border="0" style="FILTER: revealTrans(duration=2,transition=6)"></a>');
document.write('</div>');
document.images.imgInit.src=imgUrl[1];
//-->
</SCRIPT>
</DIV>
<DIV class=chinaz>
<SCRIPT language=javascript>
<!--
for(i=1;i<num_pic+1;i++)
document.write('<div class="sty20" style="width:'+label_width+'" id="label_'+i+'" onMouseOver="setFocus1('+i+')"><div id="page_left_2_1_1">'+label[i]+'</div></div>');
-->
</SCRIPT>
<br /><br /><br />
</DIV>
</body>
</html>
