以下是 腾讯汽车频道7屏焦点图JS代码轮播滚动切换特效 的示例演示效果:
部分效果截图:
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="此代码内容为腾讯汽车频道7屏焦点图JS代码" />
<title>腾讯汽车频道7屏焦点图JS代码</title>
<link rev=stylesheet media=all href="css/css.css" type=text/css rel=stylesheet>
<script src="js/qq.js" type=text/javascript></script>
</head>
<body><div align="center"><br /><br />
<table cellSpacing=0 cellPadding=0 width=340 align=center border=0><tbody>
<TR>
<TD>
<TABLE id=simg cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=s
onmouseover="play(this,'bimg','infos');clearAuto();"
onmouseout=setAuto()>1</TD>
<TD onMouseOver="play(this,'bimg','infos');clearAuto();"
onmouseout=setAuto()>2</TD>
<TD onMouseOver="play(this,'bimg','infos');clearAuto();"
onmouseout=setAuto()>3</TD>
<TD onMouseOver="play(this,'bimg','infos');clearAuto();"
onmouseout=setAuto()>4</TD>
<TD onMouseOver="play(this,'bimg','infos');clearAuto();"
onmouseout=setAuto()>5</TD>
<TD onMouseOver="play(this,'bimg','infos');clearAuto();"
onmouseout=setAuto()>6</TD>
<TD onMouseOver="play(this,'bimg','infos');clearAuto();"
onmouseout=setAuto()>7</TD></TR></TBODY></TABLE>
<DIV id=bimg>
<DIV class=dis name="f"><A
href="#"
target=_blank><IMG height=195
src="images/14317118.jpg" width=340
border=0></A></DIV>
<DIV class=undis name="f"><A
href="#"
target=_blank><IMG height=195
src="images/14314628.jpg" width=340
border=0></A></DIV>
<DIV class=undis name="f"><A
href="#"
target=_blank><IMG height=195
src="images/14255606.jpg" width=340
border=0></A></DIV>
<DIV class=undis name="f"><A
href="http://club.auto.qq.com/kanche/5551.htm"
target=_blank><IMG height=195 src="images/23314628.jpg"
width=340 border=0></A></DIV>
<DIV class=undis name="f"><A
href="#"
target=_blank><IMG height=195
src="images/14313431.jpg" width=340
border=0></A></DIV>
<DIV class=undis name="f"><A
href="#"
target=_blank><IMG height=195
src="images/14100054.jpg" width=340
border=0></A></DIV>
<DIV class=undis name="f"><A
href="#"
target=_blank><IMG height=195
src="images/14284624.jpg" width=340
border=0></A></DIV></DIV></TD></TR>
<TR>
<TD class=linkww background=images/focu_t_bg.gif
height=20>
<DIV id=infos>
<DIV class=dis name="f"><A
href="#"
target=_blank>售4.18-5.18万 吉利熊猫到店</A></DIV>
<DIV class=undis name="f"><A
href="#"
target=_blank>腾讯汽车全球首试起亚新车Soul</A></DIV>
<DIV class=undis name="f"><A
href="#"
target=_blank>影响2008中国进口汽车大典</A></DIV>
<DIV class=undis name="f"><A
href="#"
target=_blank>名车工厂探秘:蜥蜴之王-威兹曼</A></DIV>
<DIV class=undis name="f"><A
href="#"
target=_blank>新一代迷你敞篷车提前曝光</A></DIV>
<DIV class=undis name="f"><A
href="#"
target=_blank>雅力士获C-CNAP五星殊荣</A></DIV>
<DIV class=undis name="f"><A
href="#"
target=_blank>东风日产发布全新品牌主张</A></DIV></DIV></TD></TR>
</tbody>
</table>
</div>
</body>
</html>
JS代码(qq.js):
function getid(obj)//ȡ��Ӧid��Ԫ��{
return document.getElementById(obj);
}
function getNames(obj,name,tij)//ȡobjԪ���±�ǩΪtij��Ԫ�ز�Ҫ������name����=name;
����һ������{
var p = getid(obj);
var plist = p.getElementsByTagName(tij);
var rlist = new Array();
for(i=0;
i<plist.length;
i++){
if(plist[i].getAttribute("name") == name){
rlist[rlist.length] = plist[i];
}
}
return rlist;
}
function ri(obj)//ȡ�ö�Ӧ��Сͼ�б��е�ǰԪ�ض�Ӧ�����{
var p = getid("simg").getElementsByTagName("td");
for(i=0;
i<p.length;
i++){
if(obj == p[i]){
return i;
}
}
}
function ci(obj)//Сͼѡ���Ĵ������{
var p = getid("simg").getElementsByTagName("td");
for(i=0;
i<p.length;
i++){
if(obj ==p[i]){
p[i].className = "s";
}
else{
p[i].className = "";
}
}
}
function fiterplay(obj,num,t,name)//����ҳ���ĺ���.���ö�Ӧ���ݵ����غ���ʾ obj:Ԫ�ص�id name:Ԫ�ض�Ӧ��name���Ե�ֵ,t:��Ӧ���ݵı�ǩ num:��ǰѡ���Ԫ�ص����{
var fitlist = getNames(obj,name,t);
for(i=0;
i<fitlist.length;
i++){
if(i == num){
fitlist[i].className = "dis";
}
else{
fitlist[i].className = "undis";
}
}
}
function play(obj,n1,n2)//���ŵĺ���{
var p = obj.parentNode.getElementsByTagName("td");
var bimg = getid(n1);
var infos = getid(n2);
var num = ri(obj);
try//ie�µĴ������{
with(bimg){
filters[0].Apply();
//�����˾�ci(obj);
//���Сͼ��ѡ��.���Է���try����.fiterplay(n1,num,"div","f");
//�����˾��ж�Ӧ���ֵ���ʾ������filters[0].play();
//�����˾�//alert(p[0].innerHTML)}
with(infos){
filters[0].Apply();
//�����˾�ci(obj);
//���Сͼ��ѡ��.���Է���try����.fiterplay(n2,num,"div","f");
//�����˾��ж�Ӧ���ֵ���ʾ������filters[0].play();
//�����˾�}
}
catch(e)//ff�µĴ������{
ci(obj);
fiterplay(n1,num,"div","f");
fiterplay(n2,num,"div","f");
}
}
var n=0;
function clearAuto(){
clearInterval(autoStart);
}
;
function setAuto(){
autoStart=setInterval("auto(n)",4000)}
function auto(){
var x = getid("simg").getElementsByTagName("td");
n++;
if(n>x.length-1)n=0;
play(x[n],"bimg","infos");
}
setAuto();
CSS代码(css.css):
#simg TD{FONT-SIZE:10px;BACKGROUND:url(http://mat1.qq.com/auto/08index/fcnbg.gif) no-repeat;WIDTH:16px;COLOR:#fff;LINE-HEIGHT:11px;FONT-FAMILY:Arial;TEXT-ALIGN:center}
#simg{BORDER-RIGHT:#3e3e3e 1px solid;BORDER-TOP:#3e3e3e 1px solid;FILTER:alpha(opacity=80);MARGIN:182px 0px 0px 258px;BORDER-LEFT:#3e3e3e 1px solid;WIDTH:82px;BORDER-BOTTOM:#3e3e3e 1px solid;POSITION:absolute;moz-opacity:0.8;opacity:0.8}
#simg .s{BACKGROUND:red}
#simg .s IMG{FILTER:#5F6E7C}
#simg TD{CURSOR:pointer}
#bimg{FILTER:progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 );WIDTH:340px;HEIGHT:195px}
#infos{FILTER:progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 );WIDTH:340px;HEIGHT:20px;TEXT-ALIGN:right}
#infos DIV{FONT-WEIGHT:bold;FONT-SIZE:12px;COLOR:#fff;MARGIN-RIGHT:21px;PADDING-TOP:5px}
.dis{DISPLAY:block}
.undis{DISPLAY:none;LINE-HEIGHT:0px;HEIGHT:0px}
.linkww TD{COLOR:#ffffff;TEXT-DECORATION:none}
.linkww A{COLOR:#ffffff;TEXT-DECORATION:none}
.linkww A:hover{TEXT-DECORATION:underline}