如何将每三个图像放在一个 div 中？

Question

我有一个来自 Malsup 的 jQuery Cycle 插件的幻灯片，但我根本不懂 php。

我想在我的网站上动态生成幻灯片。

这是标记：

        <div id="slideshow">
             <div class="slide">
                    <a href="image1.jpg"><img src="image1-thumb.jpg" title="image1"/></a>
                    <a href="image2.jpg"><img src="image2-thumb.jpg" title="image2"/></a>
                    <a href="image3.jpg"><img src="image3-thumb.jpg" title="image2"/></a>
              </div>
             <div class="slide">
                    <a href="image4.jpg"><img src="image1-thumb.jpg" title="image1"/></a>
                    <a href="image5.jpg"><img src="image2-thumb.jpg" title="image2"/></a>
                    <a href="image6.jpg"><img src="image3-thumb.jpg" title="image2"/></a>
              </div>
         </div>

问题是image1是静态的，而其他5张图片是在php中动态获取的：

                      <?php foreach ($images as $image) { ?>
                      <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $image['thumb_tiny']; ?>" alt="<?php echo $heading_title; ?>"/></a>
                      <?php } ?>

如何在 php 的帮助下使用 .slide 类将每三个图像包装在一个 div 中，以便第一张幻灯片包含一个静态图像和两个动态图像，而其他幻灯片（无限数量）包含接下来的三个动态获取成像？

谢谢你，希望我的描述不难理解:)

Answer 1

使用 for 循环获得索引，然后只需检查该索引的模 3 是否为 0 即可每三张图像执行一次操作。

<?php
for ($i = 0; $i < count($images); $i++)
{
    if ($i % 3 == 0) { // Do something every 3 images }
    echo "<a href=... // etc
}
?>

由于您的第一张图片是静态的，并且这是唯一的特殊情况，您可以明确地检查这种情况并相应地更改值，

if ($i == 2) { // Force a div }
// You then need to offset the value for the modulo check,
if ($i > 2 && $i+2 % 3 == 0) { // Do something every 3 images after first 2 }

Answer 2

模运算符在这种情况下真的很方便：

if (!empty($images)) {
    echo '<div class="slide">';

    for ($i = 0; $i < count($images); $i++) {
        $image = $images[$i];

        // check if we need to start a new div
        if ($i > 0 && $i % 3 === 0) {
            echo '</div><div class="slide">';
        }

        echo '<a href="'.$image['popup'].'" title="'.$heading_title.'"><img src="'.$image['thumb_tiny'].'" alt="'.$heading_title.'"/></a>';
    }

    echo '</div>';
}

Answer 3

<div id="slideshow">
<?
$n_images = 3;
$i = 0;
while ($i < count($images)) {
?>
    <p class="slide">
<?
    if ($i == 0) {
?>
        <a href="static.jpg" title="Static"><img src="static_thumb.jpg" alt="Static" /></a>
<?
    }
    for ($j = 0; $j < ($i > 0 ? $n_images : $n_images - 1); $j++) {
?>
        <a href="<? echo $images[$i + $j]['popup']?>" title="<? echo $heading_title?>"><img src="<? echo $images[$i + $j]['thumb_tiny']?>" alt="<? echo $heading_title?>" /></a>
<?
    }
?>
    </p>
<?
    $i += $n_images;
}
?>
</div>