清爽簡潔的圖片交替導航效果_圖片特效特效

風格簡潔的圖片切換，沒有過多修飾，看上去挺清爽，當前圖片滾動到哪一張，下面的文字的背景會變色，帶有三角導航以指引當前的位置，各種網(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>清爽簡潔的圖片交替導航效果</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; //打開頁面等待圖片載入的時間
	var time2 = 4; //圖片輪轉(zhuǎn)間隔時間
	
	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;
		}
	}

<div   id="znjbzjn"   class=focusPic id=focusPic>
<SCRIPT language=JavaScript>
<!--
	document.write('<div   id="znjbzjn"   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="znjbzjn"   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="znjbzjn"   class=mb5u>
<SCRIPT language=javascript>

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

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

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

[收藏][報錯][返回列表]

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

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

圖片特效特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復制本頁鏈接| 搜索清爽簡潔的圖片交替導航效果
特效說明：
圖片特效模板-清爽簡潔的圖片交替導航效果。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

清爽簡潔的圖片交替導航效果_圖片特效特效

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

圖片特效特效推薦

猜你也喜歡看這些