ZOL五屏带箭头JS焦点图代码轮播滚动切换特效

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

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

以下是 ZOL五屏带箭头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="此代码内容为ZOL五屏带箭头JS焦点图代码" />
<title>ZOL五屏带箭头JS焦点图代码</title>
<link href="css/css.css" type=text/css rel=stylesheet>
</head>
<body>
<script src="js/lanren.js" type=text/javascript></script>
<table width="429" height="322" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="390" height="195"><div class="Hr_1" id="div" style="CURSOR: hand">
      <div class="Hr_11">
	    <a class=act id=a0 onmouseover=clearAuto(); onclick=Mea(0); onmouseout=setAuto() href="#" target=_self>QQ仙境</a> 
		<a class=nor id=a1 onmouseover=clearAuto(); onclick=Mea(1); onmouseout=setAuto() href="#" target=_self>永恒之塔</a> 
		<a class=nor id=a2 onmouseover=clearAuto(); onclick=Mea(2); onmouseout=setAuto() href="#" target=_self>黑道圣徒2</a>
		<a class=nor id=a3 onmouseover=clearAuto(); onclick=Mea(3); onmouseout=setAuto() href="#" target=_self>墨香</a>
		<a class="nor" id=a4 onmouseover=clearAuto(); onclick=Mea(4); onmouseout=setAuto() href="#" target=_self>仙剑OL</a>
	  </div>
		
    <a href="#" target="_blank"><img id="pc_0" style="DISPLAY: block" height="160" src="images/001.jpg" width="317" /></a>
	<a href="#" target="_blank"><img id="pc_1" style="DISPLAY: none" height="160" src="images/002.jpg" width="317" /></a>
	<a href="#" target="_blank"><img id="pc_2" style="DISPLAY: none" height="160" src="images/003.jpg" width="317" /></a>
	<a href="#" target="_blank"><img id="pc_3" style="DISPLAY: none" height="160" src="images/004.jpg" width="317" /></a>
	<a href="#" target="_blank"><img id="pc_4" style="DISPLAY: none" height="160" src="images/005.jpg" width="317" /></a>
	</div>
	</td>
  </tr>
</table>
<p align="center"></p>
<p align="center"></p>
<p align="center"><br />
</p>
</body></html>

JS代码(lanren.js):

/* ------------------------------------------------------------------------www.lanrentuku.com------------------------------------------------------------------------- */
var n=0;
	var showNum = document.getElementById("num");
	function Mea(value){
	n=value;
	setBg(value);
	plays(value);
}
function setBg(value){
	for(var i=0;
	i<5;
	i++){
	if(value==i){
	document.getElementById("a"+value).className='act';
}
else{
	document.getElementById("a"+i).className='nor';
}
}
}
function plays(value){
	for(i=0;
	i<5;
	i++){
	if(i==value){
	document.getElementById("pc_"+value).style.display="block";
	//alert(document.getElementById("pc_"+value).style.display)}
else{
	document.getElementById("pc_"+i).style.display="none";
}
}
}
function clearAuto(){
	clearInterval(autoStart)}
function setAuto(){
	autoStart=setInterval("auto(n)",3000)}
function auto(){
	n++;
	if(n>4)n=0;
	Mea(n);
}
function sub(){
	n--;
	if(n<0)n=4;
	Mea(n);
}
setAuto();

CSS代码(css.css):

BODY{FONT-SIZE:12px;FONT-FAMILY:simsun}
A{COLOR:#333;TEXT-DECORATION:none}
A:hover{COLOR:#f60;TEXT-DECORATION:underline}
.Hr_1{}
.Hr_1 IMG{BORDER-RIGHT:#a3afc5 1px solid;BORDER-TOP:#a3afc5 1px solid;FLOAT:none;BORDER-LEFT:#a3afc5 1px solid;BORDER-BOTTOM:#a3afc5 1px solid;}
.Hr_11{BORDER-TOP:#a3afc5 1px solid;MARGIN:0px 0px 0px 312px;WIDTH:124px;LINE-HEIGHT:32px;position:absolute}
.Hr_11 .nor{PADDING-RIGHT:0px;PADDING-LEFT:20px;BACKGROUND:url(a.gif) 100% -1000px;FLOAT:left;PADDING-BOTTOM:0px;WIDTH:104px;PADDING-TOP:0px;TEXT-DECORATION:none}
.Hr_11 .act{PADDING-RIGHT:0px;PADDING-LEFT:20px;BACKGROUND:url(a.gif) 100% -1041px;FLOAT:left;PADDING-BOTTOM:0px;WIDTH:104px;COLOR:#fff;PADDING-TOP:0px;TEXT-DECORATION:none}

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