5屏切换JS焦点图效果轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 5屏切换JS焦点图效果轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为5屏切换JS焦点图效果，属于站长常用代码" />
<title>5屏切换JS焦点图效果</title>
<link rel="stylesheet" rev="stylesheet" href="css/css.css" type="text/css" media="all" />
</head>

<body style="text-align:center">
<br /><br />
<SCRIPT language=javascript>
<!--
	var imgUrl=new Array();
	var imgLink=new Array();
	var label = new Array(); 

	imgUrl[1]="images/01.jpg";
	imgLink[1]="#";
	label[1] = "标题一";

	imgUrl[2]="images/02.jpg";
	imgLink[2]="#";
	label[2] = "标题二";

	imgUrl[3]="images/03.jpg";
	imgLink[3]="#";
	label[3] = "标题三";

	imgUrl[4]="images/04.jpg";
	imgLink[4]="#";
	label[4] = "标题四";

	imgUrl[5]="images/05.jpg";
	imgLink[5]="#";
	label[5] = "标题五";

          
    var num_pic =5;
	var label_width = 380/num_pic-2;
	
	var focusPicNumSrc="#";
	var time1 = 0; //打开页面时等待图片载入的时间，单位为秒，可以设置为0
	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++ ){
			//document.images['fi_'+a].src=focusPicNumSrc+'/bn_focus_num_ws_0'+a+'off.gif';
			//document.getElementById('label_'+id).class='sty20';
			var obj = GetObj('label_'+a);
			obj.className='sty20';
			obj.style.width=label_width;
		}
		//document.images['fi_'+i].src=focusPicNumSrc+'/bn_focus_num_ws_0'+i+'on.gif';
	//	document.getElementById('label_'+id).class='sty21';
		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=lanrentuku>
  <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>
</div>
</div>
</body>
</html>

CSS代码(css.css):

/* 代码整理：懒人图库 ＊珍惜他人劳动，转载请自觉注明出处 */
img{border:0px}
.lanrentuku{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(../images/p_12_02.jpg);WIDTH:74px;COLOR:#000000;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(../images/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(../images/p_12_02.jpg);WIDTH:74px;COLOR:#000000;LINE-HEIGHT:20px;MARGIN-RIGHT:2px;FONT-FAMILY:"宋体";TEXT-ALIGN:center}
.sty21{FONT-WEIGHT:normal;FONT-SIZE:12px;FLOAT:left;BACKGROUND-IMAGE:url(../images/p_12_05.jpg);WIDTH:74px;COLOR:#ffffff;LINE-HEIGHT:20px;MARGIN-RIGHT:2px;FONT-FAMILY:"宋体";TEXT-ALIGN:center}
.sty21 #page_left_2_1_1{BACKGROUND-POSITION:center top;BACKGROUND-IMAGE:url(../images/p_12_03.gif);BACKGROUND-REPEAT:no-repeat}

附件:下载该文件资源,减少时间成本(增值服务)