我将这段代码复制如下,期望高手直接更改或将更改的关键地方加注释说明。(我将css文件代码改了几次,都不成功)//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
}
//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广告代码,属于站长常用代码,更多焦点图代码请访问懒人图库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="http://www.lanrentuku.com/"
target=_blank><IMG alt=懒人图库
src="images/01.jpg"></A></DIV>
<DIV class=undis name="f"><A href="http://www.lanrentuku.com/"
target=_blank><IMG alt=懒人图库
src="images/02.jpg"></A></DIV>
<DIV class=undis name="f"><A
href="http://www.lanrentuku.com/"
target=_blank><IMG alt=懒人图库
src="images/03.jpg"></A></DIV>
<DIV class=undis name="f"><A
href="http://www.lanrentuku.com/"
target=_blank><IMG alt=懒人图库
src="images/04.jpg"></A></DIV>
<DIV class=undis name="f"><A
href="http://www.lanrentuku.com/"
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="http://www.lanrentuku.com/"
target=_blank>www.lanrentuku.com</A></DIV>
<DIV class=undis name="f"><A href="http://www.lanrentuku.com/"
target=_blank>www.lanrentuku.com</A></DIV>
<DIV class=undis name="f"><A
href="http://www.lanrentuku.com/"
target=_blank>www.lanrentuku.com</A></DIV>
<DIV class=undis name="f"><A
href="http://www.lanrentuku.com/"
target=_blank>www.lanrentuku.com</A></DIV>
<DIV class=undis name="f"><A
href="http://www.lanrentuku.com/"
target=_blank>www.lanrentuku.com</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文件代码//
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();
给这个效果外面加一个Table设置你想要的宽和高,并把CSS里所有关于宽高的相对调整一下。