互动百科五屏JS广告代码轮播滚动切换特效

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

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

以下是互动百科五屏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="此代码内容为互动百科五屏JS广告代码" />
    <LINK media=all href="css/tpbk-activity.css" type=text/css rel=stylesheet />
    <title>互动百科五屏JS广告代码</title>
</head>
<body style="text-align:center">

    <DIV id=lantern_slide>
        <TABLE class=ge id=ge cellSpacing=0 cellPadding=0>
            <TBODY>
                <TR>
                    <TD class=pic id=bimg>
                        <!---图像大小300px×300px--->
                        <DIV class=dis name="f">
                            <A href="#"
                               target=_blank>
                                <IMG alt=标题
                                     src="images/01.jpg" />
                            </A>
                        </DIV>
                        <DIV class=undis name="f">
                            <A href="#"
                               target=_blank>
                                <IMG alt=标题
                                     src="images/02.jpg" />
                            </A>
                        </DIV>
                        <DIV class=undis name="f">
                            <A href="#"
                               target=_blank>
                                <IMG alt=标题
                                     src="images/03.jpg" />
                            </A>
                        </DIV>
                        <DIV class=undis name="f">
                            <A href="#"
                               target=_blank>
                                <IMG alt=标题
                                     src="images/04.jpg" />
                            </A>
                        </DIV>
                        <DIV class=undis name="f">
                            <A href="#"
                               target=_blank>
                                <IMG alt=标题
                                     src="images/05.jpg" />
                            </A>
                        </DIV>
                        <TABLE id=font_hd cellSpacing=0 cellPadding=0>
                            <TBODY>
                                <TR>
                                    <TD class=lkff id=info>
                                        <DIV class=dis 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>内容</A>
                                        </DIV>
                                        <DIV class=undis name="f">
                                            <A href="#"
                                               target=_blank>内容</A>
                                        </DIV>
                                        <DIV class=undis name="f">
                                            <A href="#"
                                               target=_blank>内容</A>
                                        </DIV>
                                    </TD>
                                    <TD id=simg>
                                        <DIV class="" onclick=play(x[0],0) name="f">1</DIV>
                                        <DIV class=f1 onclick=play(x[1],1) name="f">2</DIV>
                                        <DIV class=f1 onclick=play(x[2],2) name="f">3</DIV>
                                        <DIV class=f1 onclick=play(x[3],3) name="f">4</DIV>
                                        <DIV class=f1 onclick=play(x[4],4) name="f">5</DIV>
                                    </TD>
                                </TR>
                            </TBODY>
                        </TABLE>
                        <SCRIPT src="js/picshow.js" type=text/javascript>
                        </SCRIPT>
                    </TD>
                </TR>
            </TBODY>
        </TABLE>
    </DIV>
</body>
</html>

JS代码(picshow.js):

function getid(o){
	return (typeof o == "object")?o:document.getElementById(o);
}
function getNames(obj,name,tij){
	var plist = getid(obj).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 fiterplay(obj,num,t,name,c1,c2){
	var fitlist = getNames(obj,name,t);
	for(i=0;
	i<fitlist.length;
	++i){
	if(i == num){
	fitlist[i].className = c1;
}
else{
	fitlist[i].className = c2;
}
}
}
function play(obj,num){
	var s = getid('simg');
	var i = getid('info');
	var b = getid('bimg');
	try{
	with(b){
	filters[0].Apply();
	fiterplay(b,num,"div","f","dis","undis");
	fiterplay(s,num,"div","f","","f1");
	fiterplay(i,num,"div","f","dis","undis");
	filters[0].play();
}
}
catch(e){
	fiterplay(b,num,"div","f","dis","undis");
	fiterplay(s,num,"div","f","","f1");
	fiterplay(i,num,"div","f","dis","undis");
}
}
var autoStart = 0;
	var n = 0;
	var s = getid("simg");
	var x = getNames(s,"f","div");
	function clearAuto(){
	clearInterval(autoStart);
}
;
	function setAuto(){
	autoStart=setInterval("auto(n)",3000)}
function auto(){
	n++;
	if(n>(x.length-1)){
	n = 0;
	clearAuto();
}
play(x[n],n);
}
function ppp(){
	setAuto();
}
ppp();

CSS代码(tpbk-activity.css):

IMG{BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px}
#lantern_slide{BORDER-RIGHT:#ccc 1px solid;PADDING-RIGHT:3px;BORDER-TOP:#ccc 1px solid;PADDING-LEFT:3px;PADDING-BOTTOM:3px;MARGIN:8px 0px;OVERFLOW:hidden;BORDER-LEFT:#ccc 1px solid;WIDTH:302px;PADDING-TOP:3px;BORDER-BOTTOM:#ccc 1px solid;HEIGHT:344px}
#bimg{FILTER:progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 );OVERFLOW:hidden;HEIGHT:300px}
#info{FONT-WEIGHT:bold;FONT-SIZE:14px;LINE-HEIGHT:34px;TEXT-ALIGN:center}
.lkff A{COLOR:#fff;TEXT-DECORATION:none}
.lkff A:hover{COLOR:#fff;TEXT-DECORATION:none}
#simg{PADDING-LEFT:9px}
#simg DIV{FONT-SIZE:12px;BACKGROUND:#d6d6d6;FLOAT:left;WIDTH:18px;CURSOR:pointer;COLOR:#fff;LINE-HEIGHT:18px;MARGIN-RIGHT:1px;HEIGHT:18px;TEXT-ALIGN:center}
#simg .f1{BACKGROUND:#6f6f6f}
.dis{DISPLAY:block}
.undis{DISPLAY:none}
.lkff{WIDTH:180px}
#font_hd{MARGIN-TOP:3px;BACKGROUND:#343434;WIDTH:100%;HEIGHT:41px}
#font_hd TD{OVERFLOW:hidden;HEIGHT:25px}
.pic{OVERFLOW:hidden}
.pic .dis A{DISPLAY:block;FONT-SIZE:262px;VERTICAL-ALIGN:middle;OVERFLOW:hidden;WIDTH:300px;FONT-FAMILY:Arial;HEIGHT:300px;TEXT-ALIGN:center}
.pic .dis A IMG{MAX-WIDTH:300px;VERTICAL-ALIGN:middle}
#font_hd TD A{FONT-SIZE:12px;WIDTH:180px;LINE-HEIGHT:25px;HEIGHT:25px}

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