Question

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

我正在尝试将包含图像的jQuery代码插入表中的<td>，但图像不在表格范围内。我尝试了很多方法，但它没有用。

Javscript

<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/

我该如何解决？

Answer 1

尝试在表格中添加table-layout: fixed，这样可以防止图片“走出表格边界”

Answer 2

测试了你的代码，桌子正在调整以适应我的每个图像，也许你的页面上还有其他代码强制大小？

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

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

图像的宽度都是相同的大小。如果它们的宽度超过975px，你应该考虑在网上调整它们的大小......

我也显示了所有图像，然后一次消失，但我假设你在其他地方限制表格单元格的高度（我用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;
}

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

在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来自jquery.com：

<!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>

使用jQuery将图像插入表中

2 个答案: