php - 如何显示带有动态 id 的 html 图像

Question

我是这方面的新手，我需要更多专家的帮助。问题是，我正在尝试使用 this pure css easy slider但该示例似乎与静态图像一起使用。

在我的例子中，我使用 php 来动态显示图像，所以我需要使用某种循环(我想)来自动为这些标签生成 id

我想做的是在示例中做的相同的事情，但具有单独的 ids:

<img id="img-1" src="img.jpg" alt>
<img id="img-2" src="img.jpg" alt>
<img id="img-3" src="img.jpg" alt>
<img id="img-4" src="img.jpg" alt>
<img id="img-5" src="img.jpg" alt>

所以我正在尝试使用这段代码:

<?php 
$categories = $conexion->query("SELECT COUNT(id) AS total,id,icon,name,image FROM categories  ORDER BY id LIMIT 8");
while($row = $categories->fetch_array()) {
    $id = $row['id'];
    $image = $row['image'];
    $name = $row['name'];
    $total = $row['total'];

    echo '<div id="slider">';
    for($i = 0; $i <= $total; $i++) {
        echo '<figure>
        <img class="ns-img" id="img-'.$i.'" src="'.$image.'"> 
        </figure>';
    }
    echo '</div>';
}
$categories->close();
?>

但它似乎无法正常工作，因为它只是一遍又一遍地向我显示相同的第一张图片，而当动态显示这些图片时，css 结构就崩溃了:C 我该怎么办？

Answer 1

因为你有一个 while循环，不需要 for循环

同样在您在问题中分享的示例中，您只需要 1 <div id="slider">和 <figure> .所以你需要将它们移出你的循环

您的最终代码应如下所示:

<?php 
$categories = $conexion->query("SELECT COUNT(id) AS total,id,icon,name,image FROM categories  ORDER BY id LIMIT 8");

$i = 1;
echo '<div id="slider"><figure>';
while($row = $categories->fetch_array()) {
    $id = $row['id'];
    $image = $row['image'];
    $name = $row['name'];
    $total = $row['total'];

    echo '<img class="ns-img" id="img-'.$i.'" src="'.$image.'">';
    $i++;
}
echo '</figure></div>';

$categories->close();
?>