主页

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>

...全文

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

phonenix66 2010-08-01

border有宽度

回复赞

beyond_me21 2010-08-01

把图片的高度改成328px,因为你每张图都有１象素的上下边框，边框也是算高度的，三张图加起来就是右边的高度多出了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>