腾讯汽车频道7屏焦点图JS代码轮播滚动切换特效

版权:原创 更新时间:1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 腾讯汽车频道7屏焦点图JS代码轮播滚动切换特效 的示例演示效果:

当前平台(PC电脑)
  • 平台:

部分效果截图:

腾讯汽车频道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}
附件:下载该文件资源,减少时间成本(增值服务)
留言
该资源可下载
File Source
.rar
198.48 KB
Html 焦点滚动特效4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害,或使用了您的版权,请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
联系我们
  • QQ:21499807
  • 邮箱:sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章