網(wǎng)頁(yè)特效代碼模板無憂>網(wǎng)頁(yè)特效>圖片特效特效代碼>

清爽簡(jiǎn)潔的圖片交替導(dǎo)航效果_圖片特效特效

風(fēng)格簡(jiǎn)潔的圖片切換，沒有過多修飾，看上去挺清爽，當(dāng)前圖片滾動(dòng)到哪一張，下面的文字的背景會(huì)變色，帶有三角導(dǎo)航以指引當(dāng)前的位置，各種網(wǎng)站都能用。

<!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" mrc="text/html; charset=gb2312" />
<title>清爽簡(jiǎn)潔的圖片交替導(dǎo)航效果</title>
<style>
img{border:0px}
.mb5u{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]="http://";
	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="http://";
	var time1 = 3; //打開頁(yè)面等待圖片載入的時(shí)間
	var time2 = 4; //圖片輪轉(zhuǎn)間隔時(shí)間
	
	var timeout1 = time1*1000;
	var timeout2 = time2*1000;
	var jumpUrl = '';
	var nn=1;//初始焦點(diǎn)
	var curFileNum = 1;//傳遞給myPlayer對(duì)象 表示目前焦點(diǎn)序列值
	
	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;
		}
	}

<div   id="7fz5jfj"   class=focusPic id=focusPic>
<SCRIPT language=JavaScript>
<!--
	document.write('<div   id="l5v55rr"   class=focusPicNum style=display:none>');
	for (i=1;i<num_pic+1;i++ )
	{
		document.write('<A href=javascript:setFocus1('+i+');><IMG height=15 src='http://p1.mb5u.com/texiao/1/20110225160516374'/bn_focus_num_ws_0'+i+'off.gif width=23 border=0 name=fi_'+i+'></A>');
	}
	document.write('</DIV>');
	document.write('<div   class="xx7dzz5"   id="page_left_1">');
	document.write('<a id="PicLink" href="javascript:goUrl()"><img src="http://p1.mb5u.com/texiao/1/20110225160516375" 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   id="zxrvxlb"   class=mb5u>
<SCRIPT language=javascript>

</SCRIPT>
<br /><br /><br />

</DIV>
</body>
</html>

所屬頻道：圖片特效特效/更新時(shí)間：2012-12-04

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)圖片特效特效：

清爽簡(jiǎn)潔的圖片交替導(dǎo)航效果_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些