Question

我将上传到我网站上的图片存储在数据库中，然后将它们加载到网站中时，将它们存储在数组中。我的问题是我想以幻灯片形式显示图片，但由于有时数组并不总是相同，所以无法正确显示！

我尝试执行if语句，但是幻灯片功能根本不起作用！另外，我的阵列工作正常！只是显示有问题

$photosarray= array(); //array to store photos names 
        $count=0;
        while ($row2=mysqli_fetch_array($res2))
        {
          $image=$row2['img_name'];
          $photosarray[$count]=$image;
          $count=$count+1;
        }
 echo'
                  <td>
                  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                      <img src="../photo/'.$photosarray[0].'" class="d-block w-100" alt="...">
                      </div>
                      <div class="carousel-item">
                      <img src="../photo/'.$photosarray[1].'" class="d-block w-100" alt="...">
                      </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                    </a>
                  </div>
                  </td>';
    echo '
              <p class="font-weight-bold">click the image to view in full 
  size.</p>


              </div>
              </tbody>
              ';

我希望我的幻灯片能够根据阵列中的图像数量进行工作！所以数组只有2张图像，那么幻灯片应该只有2张幻灯片！

Answer 1

您需要循环显示，更改：

    <div class="carousel-item active">
        <img src="../photo/'.$photosarray[0].'" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
        <img src="../photo/'.$photosarray[1].'" class="d-block w-100" alt="...">
    </div>

到

foreach($photosarray as $photo){
   print('
    <div class="carousel-item">
        <img src="../photo/'.$photo.'" class="d-block w-100" alt="...">
    </div>
');
}

Answer 2

尝试

<?php
    $photosarray= array(); //array to store photos names 
    $count=0;
    while ($row2=mysqli_fetch_array($res2))
    {
      $image=$row2['img_name'];
      $photosarray[$count]=$image;
      $count=$count+1;
    }
    echo'<td>
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>';
    foreach($photosarray as $photo){
        echo '
         <div class="carousel-item">
             <img src="../photo/'.$photo.'" class="d-block w-100" alt="...">
         </div>
     ';
    }
    echo '<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </td>';
    echo '<p class="font-weight-bold">click the image to view in full size.</p>
            </div>
          </tbody>
          ';

或

<td>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
  <?php
      $counter = 1;
      while($row2 = mysql_fetch_array($res2)){
  ?>
              <div class="carousel-item<?php if($counter <= 1){echo " active"; } ?>">
                    <img  alt="First slide image" src="<?php echo '../photo/'.$row2['img_name']; ?>"/>
              </div>
  <?php
      $counter++;
      }
      mysql_close($connection);
  ?>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

          <ol class="carousel-indicators">
             <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
             <li data-target="#carousel-example-captions" data-slide-to="1"></li>
             <li data-target="#carousel-example-captions" data-slide-to="2"></li>
          </ol>
      </div>
  </div>

  </td>
<p class="font-weight-bold">click the image to view in full size.</p>
</div>

如何修复显示数组中的多张图片

2 个答案: