清爽简洁的图片交替导航效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

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=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(//ku.shouce.ren/files/images/201601/56a341b8ad5b8.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(//ku.shouce.ren/files/images/201601/56a341b9574ef.jpg); WIDTH: 74px; COLOR: #ffffff; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty20 {FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; BACKGROUND-IMAGE: url(//ku.shouce.ren/files/images/201601/56a341b8ad5b8.jpg); WIDTH: 74px;LINE-HEIGHT: 20px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty21 {FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; BACKGROUND-IMAGE: url(//ku.shouce.ren/files/images/201601/56a341baee033.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(//ku.shouce.ren/files/images/201601/56a341bb88935.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]="//ku.shouce.ren/files/images/201601/56a341bc57e80.jpg";
	imgLink[1]="/";
	label[1] = "图片一";

imgUrl[2]="//ku.shouce.ren/files/images/201601/56a341bcee31e.jpg";
	imgLink[2]="/";
	label[2] = "图片二";

imgUrl[3]="//ku.shouce.ren/files/images/201601/56a341bd8e113.jpg";
	imgLink[3]="//";
	label[3] = "图片三";

imgUrl[4]="//ku.shouce.ren/files/images/201601/56a341bf4d4c2.jpg";
	imgLink[4]="/";
	label[4] = "图片四";

imgUrl[5]="//ku.shouce.ren/files/images/201601/56a341bcee31e.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;
		}
	}

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

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

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

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

清爽简洁的图片交替导航效果

分类

图片代码

描述

风格简洁的图片切换，没有过多修饰，看上去挺清爽，当前图片滚动到哪一张，下面的文字的背景会变色，带有三角导航以指引当前的位置，各种网站都能用。