Skype中文官网6屏切换JS代码轮播滚动切换特效

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

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

以下是 Skype中文官网6屏切换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="此代码内容为Skype中文官网6屏切换JS代码" />
<title>Skype中文官网6屏切换JS代码</title>
<link href="css/floatPic.css" type=text/css rel=Stylesheet>
<script language=javascript src="js/floatPic.js" type=text/javascript></script>
</head>
<body>
<br>
<table width="368" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="368"><DIV class=auto_2_left_1_2 style="MARGIN-TOP: 6px; WIDTH: 365px; HEIGHT: 300px"><SPAN id=focuspic><DIV id=NewsPic><A title=标题 href="#" target=_blank><IMG class=Picture src="images/01.gif"></A><A title=程序员设计师联盟淘宝店 href="#" target=_blank><IMG class=Picture src="images/02.gif"></A><A title=程序员设计师联盟淘宝店 style="DISPLAY: none" href="#" target=_blank><IMG class=Picture src="images/03.gif"></A><A title=程序员设计师联盟淘宝店 style="DISPLAY: none; VISIBILITY: hidden" href="#" target=_blank><IMG class=Picture src="images/04.gif"></A><A title=程序员设计师联盟淘宝店 style="DISPLAY: none; VISIBILITY: hidden" href="#" target=_blank><IMG class=Picture src="images/05.gif"></A><A title=程序员设计师联盟淘宝店 style="DISPLAY: none; VISIBILITY: hidden" href="#" target=_blank><IMG class=Picture src="images/06.gif"></A></DIV><DIV id=NewsPicTxt style="DISPLAY: none; VISIBILITY: hidden"></DIV></SPAN>
<SCRIPT language=javascript>init();</SCRIPT>
</DIV></td>
  </tr>
</table>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
</body></html>

JS代码(floatPic.js):

var isIE=!(navigator.userAgent.indexOf('MSIE')==-1);
	var news;
	var curNew=0;
	var timer;
	function init(){
	var div=document.getElementById("NewsPic");
	if(!div)return;
	var nav=document.createElement("DIV");
	nav.className="Nav";
	var nodes;
	if(isIE){
	nodes=div.childNodes;
}
else{
	nodes=childrenNodes(div.childNodes);
}
news=new Array(nodes.length);
	for(var i=nodes.length-1;
	i>=0;
	i--){
	var element=nodes[i];
	news[i]={
}
;
	news[i].Element=element;
	news[i].Text=element.getAttribute("title");
	news[i].Url=element.getAttribute("href");
	var n=document.createElement("span");
	n.innerHTML="<a herf=\"javascript:;
	\" onclick=\"javascript:curNew="+(i-1)+";
	change();
	\">"+(i+1)+"</a>";
	if(i==curNew)n.className="Cur";
	nav.appendChild(n);
	news[i].LinkElement=n;
}
div.appendChild(nav);
	curNew--;
	change();
}
function childrenNodes(node){
	var c=new Array();
	for(var i=0;
	i<node.length;
	i++){
	if(node[i].nodeName.toLowerCase()=="a") c.push(node[i]);
}
return c;
}
function change(){
	var div=document.getElementById("NewsPic");
	var text=document.getElementById("NewsPicTxt");
	if(!div)return;
	curNew=curNew+1;
	if(curNew>=news.length)curNew=0;
	for(var i=0;
	i<news.length;
	i++){
	if(i==curNew){
	news[i].Element.style.display="block";
	news[i].Element.style.visibility="visible";
	news[i].LinkElement.className="Cur";
	text.innerHTML="<a href=\""+news[i].Url+"\" title=\""+news[i].Text+"\" target=\"_blank\">"+news[i].Text+"</a>";
}
else{
	news[i].Element.style.visibility="hidden";
	news[i].Element.style.display="none";
	news[i].LinkElement.className="Normal";
}
}
if(timer)window.clearTimeout(timer);
	timer=window.setTimeout("change()",3000);
}

CSS代码(floatPic.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
#NewsPic{BORDER-TOP-WIDTH:0px;PADDING-RIGHT:0px;PADDING-LEFT:0px;BORDER-LEFT-WIDTH:0px;LEFT:0px;BORDER-BOTTOM-WIDTH:0px;PADDING-BOTTOM:0px;MARGIN:0px;WIDTH:368px;PADDING-TOP:0px;POSITION:relative;TOP:0px;HEIGHT:300px;BORDER-RIGHT-WIDTH:0px}
#NewsPicTxt{BORDER-TOP-WIDTH:1px;PADDING-RIGHT:0px;PADDING-LEFT:0px;FONT-WEIGHT:bold;BORDER-LEFT-WIDTH:1px;FONT-SIZE:12px;BORDER-BOTTOM-WIDTH:1px;PADDING-BOTTOM:0px;MARGIN:3px auto 0px;WIDTH:365px;COLOR:black;PADDING-TOP:0px;FONT-FAMILY:Sans-Serif;POSITION:relative;HEIGHT:0px;TEXT-ALIGN:center;BORDER-RIGHT-WIDTH:1px}
#NewsPicTxt A{COLOR:black;TEXT-DECORATION:none}
#NewsPicTxt A:hover{COLOR:black;TEXT-DECORATION:none}
#NewsPicTxt A:visited{COLOR:black;TEXT-DECORATION:none}
#NewPicTxt A:link{COLOR:black;TEXT-DECORATION:none}
#NewsPicTxt A:hover{COLOR:red}
#NewsPic A{BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px;TEXT-DECORATION:none}
#NewsPic A:hover{TEXT-DECORATION:none}
#NewPic A:visited{TEXT-DECORATION:none}
#NewsPic .Picture{BORDER-RIGHT:#ffffff 1px solid;BORDER-TOP:#ffffff 1px solid;LEFT:0px;BORDER-LEFT:#ffffff 1px solid;WIDTH:100%;BORDER-BOTTOM:#ffffff 1px solid;POSITION:absolute;TOP:0px;HEIGHT:100%}
#NewsPic .Nav{RIGHT:0px;WIDTH:100%;BOTTOM:0px;POSITION:absolute;HEIGHT:12px}
#NewsPic .Nav SPAN{DISPLAY:block;BACKGROUND:#000000;FLOAT:right;FONT:10px Courier;BORDER-LEFT:#ffffff 1px solid;WIDTH:24px;CURSOR:hand;COLOR:#ffffff;HEIGHT:100%;TEXT-ALIGN:center}
#NewsPic .Nav SPAN.Cur{BACKGROUND:#019fe8;COLOR:white}
#NewsPic .Nav SPAN.Normal{BACKGROUND:#000000;FILTER:Alpha(opacity=50);COLOR:white;opacity:.5}
#NewsPic .Nav SPAN A{DISPLAY:block;WIDTH:100%;COLOR:white;POSITION:relative;HEIGHT:100%}
#NewsPic .Nav SPAN A:hover{CURSOR:hand}

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