php - Twitter Bootstrap 轮播使用 PHP 实现动态化

Question

我正在尝试制作一个使用 Twitter Bootstrap 默认 JavaScript 和 CSS 的旋转木马，但应该从 MySQL 数据库中获取图像。

我试图用 php 使轮播动态化的 HTML 是这样的:

<div class="carousel-inner">
   <div class="active item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
   </div>
   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

我期望的 PHP 文件的最终结果是这样的

<div class="carousel-inner">
   <?php renderAds(); ?>
</div>

我写的PHP函数是这样的:

function renderAds(){
    $query = queryAds();
    $query_exe = mysql_query($query);

    if(mysql_num_rows($query_exe) == 0){
        echo '<img src="images/sampleAd.jpg" >';
    }else{

        $numb =1;
        $flag =1;
        while($fetched_data = mysql_fetch_array($query_exe)){

            if($numb == 1){
                if($flag == 1){
                    echo '<div class="active item">';
                }else{
                    echo '<div class="item">';
                }
            }elseif($numb == 4){
                echo '<a href="'.$fetched_data['url'].'"  class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>';
                echo '</div>';
                $numb =0;
            }else{
                echo '<a href="'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
            }
            $numb++;
            $flag++;
        }


        echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>';
        echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>';
    }


}

在这里，与 twitter bootstrap 的默认轮播不同，我让每张幻灯片都有 4 张图片，我希望每张幻灯片过渡包含 4 张图片，而不是默认情况下一张幻灯片的单个图片。在 HTML 中，它可以工作，但是当我用我的 PHP 函数替换它时，第一张幻灯片可以工作，但是如果我在轮播中按下一个箭头，整个 div 就会崩溃。

我怎样才能让它发挥作用？

Note : Here Last image must contain the class marginLast, and the other should have marginTop and pull-left classes.

我希望在 html 中呈现的内容是这样的:

<div class="carousel-inner">

            <div class="active item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
            </div>

            <div class="item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
            </div>

            <div class="item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
            </div>

            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
   </div>

如何让我的 PHP 函数像上面那样显示结果标记？

编辑:我得到的输出是这样的:

<div id="myCarousel" class="carousel slide">
          <!-- Carousel items -->
          <div class="carousel-inner">

                <div class="active item">
                    <a href="xx2" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
                    <a href="xx" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
                    <a href="sample.com"  class="pull-left marginLast" ><img src="images/sampleAd.jpg"></a>
                </div>

                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>             
          </div><!-- end carousel-inner -->

  </div><!-- myCarousel -->

根据标记，这应该有效，但实际上无效，默认情况下，如果没有超过一张的幻灯片，箭头应该被禁用，但它是可点击的。

Answer 1

您的 MySQL 查询是否仅返回一个数组。这样，您的查询就可以重复使用(然后可以变成一个函数)并且您可以按照您认为合适的方式呈现数据。

<?php
$mysqli = new mysqli('localhost', 'username', 'password', 'database');

$sql = "SELECT * FROM table";
$res = $mysqli->query($sql);

$rows = array();
while ($row = $res->fetch_assoc()) {
    $rows[] = $row;
}
?>
<div class="carousel">
  <div class="carousel-inner">
<?php $i = 1; ?>
<?php foreach ($rows as $row): ?>
<?php $item_class = ($i == 1) ? 'item active' : 'item'; ?>
    <div class="<?php echo $item_class; ?>">
      <a href="<?php echo $row['url']; ?>">
        <img src="<?php echo $row['image']; ?>" alt="<?php echo $row['title']; ?>" />
      </a>
    </div>
<?php $i++; ?>
<?php endforeach; ?>
  </div>
</div>

您显然需要更改数据库查询，以及随后在 foreach 循环中使用的值。我还使用了 mysqli 函数，因为 mysql 函数现在已弃用，取而代之的是 MySQLi(改进了 MySQL)。