显示产品名称的竖焦点图效果轮播滚动切换特效代码

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

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

以下是显示产品名称的竖焦点图效果轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为显示产品名称的竖焦点图效果" />
<title>显示产品名称的竖焦点图效果</title>
<link rev=stylesheet media=all href="css/css.css"  type=text/css rel=stylesheet>
</head>
<body bottomMargin=0 leftMargin=0 topMargin=0 rightMargin=0>
<p><br>
  <br>
  <script src="js/fun.js"></script>
</p>
</body>
</html>

JS代码(fun.js):

/**************���ÿ�ʼ**************/
//���� .titlevar pushName=["Ψһ����","��ë����","������","è��׹","18K������","���黷"];
	//ͼƬ .imagevar pushSrc=["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg","images/06.jpg"];
	//���� .linkvar pushLink=["http://www.lanrentuku.com/","http://www.lanrentuku.com/","http://www.lanrentuku.com/","http://www.lanrentuku.com/","http://www.lanrentuku.com/","http://www.lanrentuku.com/"]var pushShow="";
	var width = '315px';
	/**************���ý���**************/
function $(x){
	return document.getElementById(x);
}
rnd.today=new Date();
	rnd.seed=rnd.today.getTime();
	function rnd(){
	rnd.seed = (rnd.seed*9301+49297) % 233280;
	return rnd.seed/(233280.0);
}
function rand(number){
	return Math.ceil(rnd()*number)-1;
}
function showPushLink(num){
	if(!num&&num!=0){
	mainPushNum++;
	if(mainPushNum>5) mainPushNum=0;
	num=mainPushNum;
}
for(i=0;
	i<6;
	i++){
	$("linkPush"+i).innerHTML="<img src='images/push"+i+".gif'>";
}
$("linkPush"+num).className="";
	$("linkPush"+num).innerHTML="<strong class='fontOrange'>"+(num+1)+".</strong>"+pushName[num];
	$("pushImg").src=pushSrc[num];
	$("pushImgLink").href=pushLink[num];
	$("pushImg").alt=pushName[num];
}
function showAtTime(){
	showPushLink();
	rollId=setInterval("showPushLink()",5000);
}
document.write('<DIV class="absolute overflow" id=push style="WIDTH:'+width+';
	">');
	document.write('<DIV id=mainPush></DIV>');
	document.write('<DIV id=linkPush style="BACKGROUND:url(images/pushBg.gif);
	HEIGHT:43px"></DIV>');
	document.write('</DIV>');
	//��ʼ��for(i=0;
	i<6;
	i++){
	pushShow+='<a href="'+pushLink[i]+'" onmouseover="showPushLink('+i+');
	clearInterval(rollId)" id="linkPush'+i+'" target="_blank"><img src="images/push'+i+'.gif"></a>';
}
$("linkPush").innerHTML=pushShow;
	var mainPushNum=rand(6);
	$("linkPush"+mainPushNum).innerHTML="<strong class='fontOrange'>"+(mainPushNum+1)+".</strong>"+pushName[mainPushNum];
	$("mainPush").innerHTML='<a href="'+pushLink[mainPushNum]+'" target="_blank" id="pushImgLink" onmouseover="clearInterval(rollId)" onmouseout="showAtTime()"><img src="'+pushSrc[mainPushNum]+'" name="pushImg" width="315" height="375" id="pushImg" alt="'+pushName[mainPushNum]+'" /></a>';
	var rollId=setInterval("showPushLink()",5000);
	//����ͼ�� �Ѽ����� www.lanrentuku.com

CSS代码(css.css):

BODY{FONT:12px "Verdana";COLOR:#333333;TEXT-ALIGN:center}
IMG{BORDER-RIGHT:0px;BORDER-TOP:0px;BORDER-LEFT:0px;BORDER-BOTTOM:0px}
#linkPush A{PADDING-RIGHT:5px;DISPLAY:block;PADDING-LEFT:7px;FLOAT:left;PADDING-BOTTOM:0px;COLOR:#333;PADDING-TOP:6px;HEIGHT:28px;TEXT-ALIGN:center;TEXT-DECORATION:none}
.overflow{OVERFLOW:hidden;WHITE-SPACE:nowrap;TEXT-OVERFLOW:ellipsis}

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