JS图片轮播问题(紧急求救)

caoyuantong2010 2010-07-31 10:37:35
我要一个表格 一行两列
左边列放置图片 右边列放置JS 图片轮播 4张图片
基本弄好了 就是不知道 为什么左列的图片和右列的就是不同高
左列的是背景图片 设置的高度是330 他总是变成336高度
全部代码如下 高手帮忙指点下
<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="360" height="330" background="_test_/xjy.jpg"> </td>
<td width="600" height="330">
<SCRIPT>
var NowFrame = 1;
var MaxFrame = 4;
var bStart = 0;
function fnToggle() {
var next = NowFrame + 1;

if(next == MaxFrame+1)
{
NowFrame = MaxFrame;
next = 1;
}

if(bStart == 0)
{
bStart = 1;

setTimeout('fnToggle()', 3500);

return;
}
else
{
oTransContainer.filters[0].Apply();

document.images['oDIV'+next].style.display = "";
document.images['oDIV'+NowFrame].style.display = "none";

oTransContainer.filters[0].Play(duration=2);

if(NowFrame == MaxFrame)
NowFrame = 1;
else
NowFrame++;
} setTimeout('fnToggle()', 3500);
}

fnToggle();
</SCRIPT>
<div align="center">
<DIV id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 600px; HEIGHT: 330px">
<A href="_test_/1.jpg" target=_blank><a href="_test_/1.jpg" target=_blank><img src="_test_/1.jpg" name="oDIV1" width=600 height=330 border=0 id=oDIV1 style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" /></A>
<A href="_test_/2.jpg" target=_blank><IMG id=oDIV2 style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" src="_test_/2.jpg" width=600 height=330 border=0></A>
<A href="_test_/3.jpg" target=_blank><IMG id=oDIV3 style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" src="_test_/3.jpg" width=600 height=330 border=0 ></A>
<A href="_test_/4.jpg" target=_blank><IMG id=oDIV4 style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" src="_test_/4.jpg" width=600 height=330 border=0></A>
</div>
</td>
</tr>
</table>
</body>
</html>
...全文
66 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
phonenix66 2010-08-01
  • 打赏
  • 举报
回复
border有宽度
beyond_me21 2010-08-01
  • 打赏
  • 举报
回复
把图片的高度改成328px,因为你每张图都有1象素的上下边框,边框也是算高度的,三张图加起来就是右边的高度多出了6象素,左边的单元格自然也就被撑大了,而左边的图是背景,
caoyuantong2010 2010-08-01
  • 打赏
  • 举报
回复
重新整理了一下代码
可以很清楚的看到 左边的图片和右边的不对其
但播放到最后一张的时候 右对其了
其他几张都不对其不知道为什么
<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="360" height="330"><img src="http://www.czu.edu.cn/img/28.jpg" width="360" height="330" /></td>
<td width="600" height="330">
<SCRIPT>
var NowFrame = 1;
var MaxFrame = 4;
var bStart = 0;
function fnToggle() {
var next = NowFrame + 1;

if(next == MaxFrame+1)
{
NowFrame = MaxFrame;
next = 1;
}

if(bStart == 0)
{
bStart = 1;

setTimeout('fnToggle()', 3500);

return;
}
else
{
oTransContainer.filters[0].Apply();

document.images['oDIV'+next].style.display = "";
document.images['oDIV'+NowFrame].style.display = "none";

oTransContainer.filters[0].Play(duration=2);

if(NowFrame == MaxFrame)
NowFrame = 1;
else
NowFrame++;
} setTimeout('fnToggle()', 3500);
}

fnToggle();
</SCRIPT>
<div align="center" style="padding:0;margin:0">
<DIV id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 600px; HEIGHT: 100px">
<A href="_test_/1.jpg" target=_blank><img src="http://www.njaccp.com/images/top_1.jpg" name="oDIV1" width=600 height=330 border=0 id=oDIV1 style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid"></A>
<A href="_test_/2.jpg" target=_blank><IMG id=oDIV2 style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; DISPLAY: none; BORDER-BOTTOM: black 0px solid" src="http://www.njaccp.com/images/top_3.jpg" width=600 height=330 border=0></A>
<A href="_test_/3.jpg" target=_blank><IMG id=oDIV3 style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; DISPLAY: none; BORDER-BOTTOM: black 0px solid" src="http://www.njaccp.com/images/top_4.jpg" width=600 height=330 border=0 ></A>
<A href="_test_/4.jpg" target=_blank><IMG id=oDIV4 style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; DISPLAY: none; BORDER-BOTTOM: black 0px solid" src="http://www.njaccp.com/images/top_5.jpg" width=600 height=330 border=0></A></div>
</td>
</tr>
</table>
</body>
</html>
fjfndfjf 2010-08-01
  • 打赏
  • 举报
回复
这个你最好提供的代码中附上你图片的绝对地址,这样大家才能真正知道你的错误所在


根据你所说的问题,你可以这样试试:

把"<div align="center"> " 改为 "<div align="center" style="padding:0;margin:0"> "
caoyuantong2010 2010-08-01
  • 打赏
  • 举报
回复
晕啊 没有人会吗?

28,409

社区成员

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧