Javascript jQuery循环图像不会显示

我正在尝试使用jQuery循环插件。我遇到的一个问题是，在第一个图像加载后，其余的图像即使在那里也不会显示。当我检查元素时，它说图像的宽度是1px，高度是33px。我在用Wordpress

谢谢你的帮助

$('.slideshow').cycle({
fx: 'fade',
speed: 500,
prev: '.slideshow_prev',
next: '.slideshow_next',
width:'fit'
});

这在my page.php中

        <ul class="slideshow">

        <?php foreach( $images as $image ): ?>
        <li>
        <table>
        <tr>
        <td>
            <div class="slideshow_image"><img src="<?php echo $image['url'];?>" alt="<?php echo $image['alt']; ?>"></div>
        </td>
        </tr>
        </table>
        </li>
        <?php endforeach; ?>
                    </ul>

---

您使用的是jquerycycle还是Cycle2

我建议简化你的html/css——我不知道你为什么要这样设置。Cycle或Cycle2都非常智能，应该能够自动处理最简单的布局。试试这个：

HTML:

---

问题是您没有为幻灯片指定宽度或高度。如果幻灯片元素是图像，Cycle通常会为您解决此问题。您的布局很可能会崩溃，因为cycle正在将绝对位置应用于无序列表项，并且表格设置为其宽度和高度的100%

看起来好像您正试图使用该表将图像水平和垂直居中。我建议你使用它，而且它很好用。这将使整个过程更加容易

确保包含cycle2和center插件的javascript文件。然后可以使用以下html：

<div class="slideshow">
    <img src="image01.jpg" alt="">
    <img src="image01.jpg" alt="">
</div>

<div class="slideshow">
    <?php foreach( $images as $image ): ?>
        <img src="<?php echo $image['url'];?>" alt="<?php echo $image['alt']; ?>"/>
    <?php endforeach; ?>
</div>

slideshow {
    padding: 0px; 
    margin: 0px; 
    display: block;
}

slideshow img {
    display: block; 
    margin: 0px; 
    padding: 0px;
    width: 100%; 
    height: auto;
}

<div class="slideshow">
    <img src="image01.jpg" alt="">
    <img src="image01.jpg" alt="">
</div>

$('.slideshow').cycle({
    centerHorz: true,
    centerVert: true
});