0

我一周前问过这个问题，但是没有人帮我解决这个问题，这是我的问题，我希望这次有人帮助我......

我正在尝试将包含图像的 jQuery 代码插入到<td>表格中，但图像超出了表格范围。我尝试了很多方法，但没有奏效。

Javascript

<script type="text/javascript">
    $(document).ready(function() { 
       var $elements = $('#picOne, #picTwo, #picTree, #picFour');

       function anim_loop(index) {
           $elements.eq(index).fadeIn(4000, function() {
               var $self = $(this);
               setTimeout(function() {
               $self.fadeOut(4000);
               anim_loop((index + 1) % $elements.length);
               }, 6000);
           });
        }
        anim_loop(0); // start with the first element

    });
</script>


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=UTF-8" />
 <title>title</title>

 <style>
 div {
     display: none;
     position: absolute;
 table-layout:fixed;

 }

 </style>


 </head>

 <body>


 <table align="center" width="975" border="1" >

 <tr height="54">
 <td width="250" width="185">
 <img src="logo.png" />
 </td>
 <td width="303" colspan="3">
 bolbol
 </td>
 </tr>
 <tr>  
 <td height="480" colspan="3">
 <div id="imageHolder">
 <div id="picOne"><img src="pic1.jpg" width="975px" /></div>
 <div id="picTwo"><img src="pic1b.jpg" width="975px" /></div>
 <div id="picTree"><img src="2b.jpg" width="975px" /></div>
 <div id="picFour"><img src="2.jpg" width="975px" /></div>
 </div>
 </td>
 </tr>

 <tr>
 <td width="206">

 </td>
 <td width="444">

 </td>
 <td>

 </td>
 </tr>
 </table>

 </body>
 </html>

以下是图片：

http://postimage.org/image/i5g1jceuv/

http://postimage.org/image/n5hfzp28b/

我该如何解决？

4

2 回答 2

1

尝试添加table-layout: fixed到表格中，这将防止图像“超出表格范围”

于 2013-02-01T12:59:36.777 回答
1

测试了您的代码，该表格正在调整以适合我的每个图像，也许您的页面上有其他代码强制大小？

我不知道您的图片尺寸，但如果您添加：

<div id="picTwo"><img src="2.jpg" width="50px" /></div>

图像的宽度它们都将具有相同的大小。如果它们的宽度超过 975 像素，您应该考虑为网络调整它们的大小......

我还让所有图像显示，然后一次消失，但我假设您正在其他地方限制表格单元格的高度（我使用 jquery 1.9.0 测试）正如@Mr_Green 所说，表格是一个奇怪的结构，尝试：

的HTML：

<div id="imageHolder">
<div id="picOne"><img src="1.jpg" width="975px" /></div>
<div id="picTwo"><img src="2.jpg" width="975px" /></div>
<div id="picTree"><img src="3.jpg" width="975px" /></div>
<div id="picFour"><img src="4.jpg" width="975px" /></div>
</div>

使用CSS：

#imageHolder{
width:975px;
background-color:#564;
padding:10px;
}

（测试后更改背景颜色和填充）。

在 javascript 中添加此行以默认隐藏元素（在 var $elements... 行之后）：

$('#picOne, #picTwo, #picTree, #picFour').hide();

编辑：我重新排列了代码，所以下一张图片在最后一张消失之前不会显示，该功能也不需要在文档中准备好：

var $elements = $('#picOne, #picTwo, #picTree, #picFour');
function anim_loop(index) {
    $elements.eq(index).fadeIn(4000, function() {
        var $self = $(this);
        setTimeout(function() {
            $self.fadeOut(4000, function(){
                anim_loop((index + 1) % $elements.length);
            });

        }, 6000);
    });
} 
$(document).ready(function() { 
    $('#picOne, #picTwo, #picTree, #picFour').hide();
    anim_loop(0); // start with the first element
});

新编辑：这里有完整的代码工作版本，没有表格，所有图像都通过 wiki commons 动态加载。来自 jquery.com 的最新 jquery：

<!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</title>
 </head>
 <body>
<table align="center" width="975" border="1" >

<tr height="54">
<td width="250" width="185">
<img src="logo.png" />
</td>
<td width="303" colspan="3">
bolbol
</td>
</tr>
<tr>  
<td height="480" colspan="3">
 <div id="imageHolder">
 <div id="picOne"><img     src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Basel_2012-10-02_Mattes_%2812%29.JPG/800px-Basel_2012-10-02_Mattes_%2812%29.JPG" width="975px" /></div>
 <div id="picTwo"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Natanjap052.jpg/800px-Natanjap052.jpg" width="975px" /></div>
 <div id="picTree"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Chelone_lyonii2.jpg/800px-Chelone_lyonii2.jpg" width="975px" /></div>
<div id="picFour"><img src="http://upload.wikimedia.org/wikipedia/commons/a/aa/Long-tailed_Duck_%28Clangula_hyemalis%29_%286663015595%29.jpg" width="975px" /></div>
 </div>
</td>
</tr>

 <tr>
<td width="206">

 </td>
<td width="444">

</td>
<td>

</td>
</tr>
</table>    
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
var $elements = $('#picOne, #picTwo, #picTree, #picFour');
function anim_loop(index) {
    $elements.eq(index).fadeIn(4000, function() {
        var $self = $(this);
        setTimeout(function() {
            $self.fadeOut(4000, function(){
                anim_loop((index + 1) % $elements.length);
            });

        }, 6000);
    });
}
$(document).ready(function() { 
    $('#picOne, #picTwo, #picTree, #picFour').hide();
    anim_loop(0); // start with the first element
});
</script>
</body>
</html>
于 2013-02-01T13:41:45.313 回答