腾讯手机频道六屏焦点图轮播滚动切换特效代码

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

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

以下是腾讯手机频道六屏焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(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="此代码内容为腾讯手机频道六屏焦点图，属于站长常用代码" />
    <title>腾讯手机频道六屏焦点图</title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <script language=javascript src="js/changimages.js"></script>
</head>
<body>
    <center>
        <TABLE id=fods cellSpacing=0 cellPadding=0 width=424 border=0>
            <TBODY>
                <TR>
                    <TD align=right height=187>
                        <UL class=dis>
                            <LI>
                                <A href="#"
                                   target=_blank>
                                    <IMG height=187
                                         src="images/01.jpg"
                                         width=270 border=0 />
                                </A>
                            </LI>
                        </UL>
                        <UL class=undis>
                            <LI>
                                <A href="#"
                                   target=_blank>
                                    <IMG height=187
                                         src="images/02.jpg"
                                         width=270 border=0 />
                                </A>
                            </LI>
                        </UL>
                        <UL class=undis>
                            <LI>
                                <A href="#"
                                   target=_blank>
                                    <IMG height=187
                                         src="images/03.jpg"
                                         width=270 border=0 />
                                </A>
                            </LI>
                        </UL>
                        <UL class=undis>
                            <LI>
                                <A href="#"
                                   target=_blank>
                                    <IMG height=187
                                         src="images/04.jpg"
                                         width=270 border=0 />
                                </A>
                            </LI>
                        </UL>
                        <UL class=undis>
                            <LI>
                                <A href="#"
                                   target=_blank>
                                    <IMG height=187
                                         src="images/05.jpg"
                                         width=270 border=0 />
                                </A>
                            </LI>
                        </UL>
                        <UL class=undis>
                            <LI>
                                <A href="#"
                                   target=_blank>
                                    <IMG height=187
                                         src="images/06.jpg"
                                         width=270 border=0 />
                                </A>
                            </LI>
                        </UL>
                    </TD>
                    <TD id=Fod_list style="PADDING-LEFT: 6px" vAlign=top align=left
                        width=154>
                        <DIV class=mod onmouseover=fodd(this)>
                            <A class=blacknl
                               href="#"
                               target=_blank>Phenom腕表手机登场</A>
                        </DIV>
                        <P style="FONT-SIZE: 1px; FLOAT: left; WIDTH: 148px; LINE-HEIGHT: 1px; HEIGHT: 5px"></P>
                        <DIV class=moardd onmouseover=fodd(this)>
                            <A class=blacknl
                               href="#"
                               target=_blank>三星U600洛俪塔版图赏</A>
                        </DIV>
                        <P style="FONT-SIZE: 1px; FLOAT: left; WIDTH: 148px; LINE-HEIGHT: 1px; HEIGHT: 5px"></P>
                        <DIV class=moardd onmouseover=fodd(this)>
                            <A class=blacknl
                               href="#"
                               target=_blank>诺基亚E51豪华版登场</A>
                        </DIV>
                        <P style="FONT-SIZE: 1px; FLOAT: left; WIDTH: 148px; LINE-HEIGHT: 1px; HEIGHT: 5px"></P>
                        <DIV class=moardd onmouseover=fodd(this)>
                            <A class=blacknl
                               href="#"
                               target=_blank>索尼爱立信X3设计图曝光</A>
                        </DIV>
                        <P style="FONT-SIZE: 1px; FLOAT: left; WIDTH: 148px; LINE-HEIGHT: 1px; HEIGHT: 5px"></P>
                        <DIV class=moardd onmouseover=fodd(this)>
                            <A class=blacknl
                               href="#"
                               target=_blank>三星S3600C赏</A></SPAN>
                        </DIV>
                        <P style="FONT-SIZE: 1px; FLOAT: left; WIDTH: 148px; LINE-HEIGHT: 1px; HEIGHT: 5px"></P>
                        <DIV class=moardd onmouseover=fodd(this)>
                            <A class=blacknl
                               href="#"
                               target=_blank>MOTO JEWEL图赏</A>
                        </DIV>
                    </TD>
                </TR>
            </TBODY>
        </TABLE>
    </center>
</body>
</html>

JS代码(changimages.js):

function fodb(obj){
	//var p = document.getElementById("Fod_list").getElementsByTagName("div");
	var pb = obj.parentNode.parentNode.parentNode.parentNode;
	//alert(p.innerHTML);
	var pb1 = obj.parentNode.getElementsByTagName("div");
	var tb = pb.getElementsByTagName("tr")[1].getElementsByTagName("ul");
	var nb = pb1.length;
	for(i=0;
	i<nb;
	i++){
	if(pb1[i] == obj){
	pb1[i].className = "mob";
	tb[i].className = "dis";
}
else{
	pb1[i].className = "moardb";
	tb[i].className = "undis";
}
}
}
function fodc(obj){
	//var p = document.getElementById("Fod_list").getElementsByTagName("div");
	var pc = obj.parentNode.parentNode.parentNode.parentNode;
	//alert(p.innerHTML);
	var pc1 = obj.parentNode.getElementsByTagName("div");
	var tc = pc.getElementsByTagName("tr")[1].getElementsByTagName("ul");
	var nc = pc1.length;
	for(i=0;
	i<nc;
	i++){
	if(pc1[i] == obj){
	pc1[i].className = "moc";
	tc[i].className = "dis";
}
else{
	pc1[i].className = "moardc";
	tc[i].className = "undis";
}
}
}
function fodd(obj){
	//var p = document.getElementById("Fod_list").getElementsByTagName("div");
	var pd = obj.parentNode.parentNode.parentNode.parentNode;
	//alert(p.innerHTML);
	var pd1 = obj.parentNode.getElementsByTagName("div");
	var td = pd.getElementsByTagName("td")[0].getElementsByTagName("ul");
	var nd = pd1.length;
	for(i=0;
	i<nd;
	i++){
	if(pd1[i] == obj){
	pd1[i].className = "mod";
	td[i].className = "dis";
}
else{
	pd1[i].className = "moardd";
	td[i].className = "undis";
}
}
}
function fodxa(obj){
	//var p = document.getElementById("Fod_list").getElementsByTagName("div");
	var pb = obj.parentNode.parentNode.parentNode.parentNode;
	//alert(p.innerHTML);
	var pb1 = obj.parentNode.getElementsByTagName("div");
	var tb = pb.getElementsByTagName("tr")[1].getElementsByTagName("ul");
	var nb = pb1.length;
	for(i=0;
	i<nb;
	i++){
	if(pb1[i] == obj){
	pb1[i].className = "moxa";
	tb[i].className = "dis";
}
else{
	pb1[i].className = "moaxrda";
	tb[i].className = "undis";
}
}
}
function fodxb(obj){
	//var p = document.getElementById("Fod_list").getElementsByTagName("div");
	var pb = obj.parentNode.parentNode.parentNode.parentNode;
	//alert(p.innerHTML);
	var pb1 = obj.parentNode.getElementsByTagName("div");
	var tb = pb.getElementsByTagName("tr")[1].getElementsByTagName("ul");
	var nb = pb1.length;
	for(i=0;
	i<nb;
	i++){
	if(pb1[i] == obj){
	pb1[i].className = "moxb";
	tb[i].className = "dis";
}
else{
	pb1[i].className = "moaxrdb";
	tb[i].className = "undis";
}
}
}
function fodxc(obj){
	//var p = document.getElementById("Fod_list").getElementsByTagName("div");
	var pb = obj.parentNode.parentNode.parentNode.parentNode;
	//alert(p.innerHTML);
	var pb1 = obj.parentNode.getElementsByTagName("div");
	var tb = pb.getElementsByTagName("tr")[0].getElementsByTagName("ul");
	var nb = pb1.length;
	for(i=0;
	i<nb;
	i++){
	if(pb1[i] == obj){
	pb1[i].className = "moxc";
	tb[i].className = "dis";
}
else{
	pb1[i].className = "moaxrdc";
	tb[i].className = "undis";
}
}
}
function fodxd(obj){
	//var p = document.getElementById("Fod_list").getElementsByTagName("div");
	var pb = obj.parentNode.parentNode.parentNode.parentNode;
	//alert(p.innerHTML);
	var pb1 = obj.parentNode.getElementsByTagName("div");
	var tb = pb.getElementsByTagName("tr")[1].getElementsByTagName("ul");
	var nb = pb1.length;
	for(i=0;
	i<nb;
	i++){
	if(pb1[i] == obj){
	pb1[i].className = "moxd";
	tb[i].className = "dis";
}
else{
	pb1[i].className = "moaxrdd";
	tb[i].className = "undis";
}
}
}

CSS代码(css.css):

body{font-size:12px;}
a{TEXT-DECORATION:none;}
#fods #Fod_list DIV{FLOAT:left;CURSOR:pointer;TEXT-ALIGN:center}
#fods #Fod_list DIV.moardd{BACKGROUND:url(../images/sjc138.gif);WIDTH:148px;COLOR:#000;LINE-HEIGHT:17px;PADDING-TOP:4px;HEIGHT:23px}
#fods #Fod_list DIV.moardd A{COLOR:#000}
#fods #Fod_list .mod{BACKGROUND:url(../images/sjc139.gif);WIDTH:148px;COLOR:#000;LINE-HEIGHT:17px;PADDING-TOP:4px;HEIGHT:23px}
#fods #Fod_list .mod A{COLOR:#000}
#fods UL{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;LIST-STYLE-TYPE:none}
LI{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;LIST-STYLE-TYPE:none}
.undis{DISPLAY:none}

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