在html中将图像动态添加到滑块中 - Dynamically add Images to slider in html

Dynamically add Images to slider in html

本文关键字：添加图像 html 动态 | 更新日期: 2023-09-27

我正在学习并制作Php、Html-jquery中的一个小项目。

我想要一个垂直滚动的滑块。数据库将从表中获取一个行数组，并获取放置在服务器上的图像的链接。然后它将显示负载并显示这些图像

这是我的div类

<div class="albums-div">
    <ul class="slides">
        <li>
            <img src="images/smalimg.png" />
        </li>
        <li>
            <img src="images/smalimg.png" />
        </li>
        <li>
            <img src="images/smalimg.png" />
        </li>
        <li>
            <img src="images/smalimg.png" />
        </li>
    </ul>
</div>

现在它是硬编码的，但我如何动态创建

<li>
            <img src="images/smalimg.png" />
        </li>

假设您在一个名为$rows的变量中返回SQL结果，并且图像链接存储为"images/smalimg.png"：

<div class="albums-div">
    <ul class="slides">
        <?php 
            foreach($rows as $row){
                echo '<li><img src="' . $row['link'] . '" /></li>';
            }
        ?>
    </ul>
</div>

您可以使用mysqli或prepared语句，我将向您展示如何使用mysqli:

表名：图像包含

image_id（int-自动递增-无符号-无默认值）

image_link（varchar-100长度-无默认值）

<?php
 $dbc = mysqli_connect("DB_HOST", "DB_USER", "DB_PASSWORD", "DB_NAME");
 $query = "SELECT image_link FROM images";
 $data = mysqli_query($dbc, $query);
 while($row = mysqli_fetch_array($data)) {
  // Do your ouput
  echo '<li>' . $row['image_link'] . '</li>';
 }
 mysqli_close($dbc);
 ?>

编辑：用数据库特定的连接值替换上面的连接名称。