Question

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

感谢您的帮助。

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

这是在我的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>

和CSS

ul.slideshow {list-style: none; padding: 0px; margin: 0px; display: block;}
ul.slideshow li {display: block; margin: 0px; padding: 0px;}
ul.slideshow li table {width: 100%; height: 100%; display: table; margin: 0px; padding: 0px; border: 0px; border-spacing: 0;}
ul.slideshow li table td {display: table-cell; vertical-align: middle; text-align: center;}
ul.slideshow li .slideshow_image {display: block; text-align: center; vertical-align: middle;}
ul.slideshow li .slideshow_image img {max-height: 100%; max-width: 100%;}

Answer 1

您使用的是jQuery Cycle还是Cycle2？

我建议简化你的html / css - 我不确定你为什么要做你的设置。 Cycle或Cycle2都非常智能，并且应该自动处理大多数简单的布局。试试这个：

HTML：

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

CSS：

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

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

Answer 2

问题是您没有为幻灯片分配宽度或高度。如果你的幻灯片元素是图像，循环通常会为你工作。您的布局很可能会折叠，因为循环将位置绝对应用于无序列表项，并且该表设置为其宽度和高度的100％。

看起来您正在尝试使用该表来水平和垂直居中显示图像。我建议使用cycle2，它是center plugin。它将使整个过程更加容易。

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

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

和JavaScript：

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

jQuery循环图像不显示

2 个答案: