MSN中国首页四屏切换新闻代码轮播滚动切换特效

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

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

以下是 MSN中国首页四屏切换新闻代码轮播滚动切换特效的示例演示效果:

当前平台(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="此代码内容为MSN中国首页四屏切换新闻代码" />
<title>MSN中国首页四屏切换新闻代码</title>
<link rel="stylesheet" href="css/css.css" />
<script language="javascript" type="text/javascript" src="js/script60.js"></script>
</head>

<body>
<DIV align="center" >
<DIV class=fpic><A id=foclnk 
href="#"><IMG id=focpic 
style="FILTER: RevealTrans ( duration = 1，transition=12 ); VISIBILITY: visible; POSITION: absolute" 
height=197 alt="" src="images/01.jpg" width=240></A>
<DIV id=fttlbg></DIV>
<DIV id=fttltxt><A 
href="#">标题零</A></DIV>
<DIV class=thubpiccur id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><A 
href="#"><IMG height=46 
alt="" src="images/01.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><A 
href="#"><IMG height=46 alt="" 
src="images/02.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><A 
href="#"><IMG height=46 alt="" 
src="images/03.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><A 
href="#"><IMG height=46 alt="" 
src="images/04.jpg" width=56></A></DIV></DIV>
<p>
  <SCRIPT language=javascript type=text/javascript>var picarry = {};var lnkarry = {};var ttlarry = {};
picarry[0] = "images/01.jpg";lnkarry[0] = "#";ttlarry[0] = "标题 标题1";picarry[1] = "images/02.jpg";lnkarry[1] = "#";ttlarry[1] = "标题 标题2";picarry[2] = "images/03.jpg";lnkarry[2] = "#";ttlarry[2] = "标题 标题3";picarry[3] = "images/04.jpg";lnkarry[3] = "#";ttlarry[3] = "标题 标题4";</SCRIPT>
  <br />
</div>
</body>
</html>

JS代码(script60.js):

/* slide */
var currslid = 0;
	var slidint;
	function setfoc(id){
	document.getElementById("focpic").src = picarry[id];
	document.getElementById("foclnk").href = lnkarry[id];
	document.getElementById("fttltxt").innerHTML = "<a href=\""+lnkarry[id]+"\" target=_blank>"+ttlarry[id]+"</a>";
	currslid = id;
	for(i=0;
	i<4;
	i++){
	document.getElementById("tmb"+i).className = "thubpic";
}
;
	document.getElementById("tmb"+id).className ="thubpiccur";
	focpic.style.visibility = "hidden";
	focpic.filters[0].Apply();
	if (focpic.style.visibility == "visible"){
	focpic.style.visibility = "hidden";
	focpic.filters.revealTrans.transition=12;
}
else{
	focpic.style.visibility = "visible";
	focpic.filters[0].transition=12;
}
focpic.filters[0].Play();
}
function playnext(){
	if(currslid==3){
	currslid = 0;
}
else{
	currslid++;
}
;
	setfoc(currslid);
}
;
	function playit(){
	//slidint = setInterval(playnext,3500);
}
;
	function stopit(){
	clearInterval(slidint);
}
;

CSS代码(css.css):

/*���������www.lanrentuku.com */
img{border:0px}
.fpic{BORDER-RIGHT:#ccc 1px solid;BORDER-TOP:#ccc 1px solid;MARGIN-LEFT:10px;BORDER-LEFT:#ccc 1px solid;WIDTH:242px;BORDER-BOTTOM:#ccc 1px solid;POSITION:relative;HEIGHT:248px}
#focpic{LEFT:1px;POSITION:absolute;TOP:1px}
.thubpic{Z-INDEX:20;WIDTH:63px;CURSOR:pointer;PADDING-TOP:4px;POSITION:absolute;TOP:194px;HEIGHT:49px}
.thubpiccur{Z-INDEX:20;WIDTH:63px;CURSOR:pointer;PADDING-TOP:4px;POSITION:absolute;TOP:194px;HEIGHT:49px}
.thubpiccur{Z-INDEX:30;BACKGROUND:url(../images/arrow.gif) no-repeat center top}
.thubpic IMG{BORDER-RIGHT:#666 3px solid;BORDER-TOP:#666 2px solid;BORDER-LEFT:#666 3px solid;WIDTH:56px;BORDER-BOTTOM:#666 2px solid;HEIGHT:45px}
.thubpiccur IMG{BORDER-RIGHT:#666 3px solid;BORDER-TOP:#666 2px solid;BORDER-LEFT:#666 3px solid;WIDTH:56px;BORDER-BOTTOM:#666 2px solid;HEIGHT:45px}
.thubpiccur IMG{BORDER-LEFT-COLOR:#fff;BORDER-BOTTOM-COLOR:#fff;BORDER-TOP-COLOR:#fff;BORDER-RIGHT-COLOR:#fff}
#tmb0{LEFT:1px}
#tmb1{LEFT:60px}
#tmb2{LEFT:120px}
#tmb3{LEFT:179px}
#fttlbg{Z-INDEX:15;BACKGROUND:#000;FILTER:alpha(opacity=50);LEFT:1px;WIDTH:240px;POSITION:absolute;TOP:164px;HEIGHT:34px;moz-opacity:0.5}
#fttltxt{FONT-SIZE:14px;Z-INDEX:16;LEFT:1px;WIDTH:240px;COLOR:#fff;LINE-HEIGHT:34px;POSITION:absolute;TOP:164px;TEXT-ALIGN:center}
#fttltxt A:link{COLOR:#fff}
#fttltxt A:hover{COLOR:#fff}
#fttltxt A:active{COLOR:#fff}
#fttltxt A:visited{COLOR:#fff}

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