Question

我试图循环浏览一些使用php在文件夹中命名的图像。这里的问题是我需要将图像放在特定的标记中，因为我会在旋转木马中动态使用它们。

通常我只是遍历项目：

<div class="slider">
<?php
  for ($x = 0; $x <= 10; $x++) {
    if ($x == 0) {
      echo '<div class="slide active"><img src="img_'.$x.'"></div>';
    } else {
      echo '<div class="slide"><img src="img_'.$x.'"></div>';
    }
  }
?>
</div>

我尝试为每张幻灯片添加四张图片，使用模数进行计数并在它们之间添加标记：

<div class="slider">
  <div class="slide active">
  <?php
    for ($x = 0; $x <= 10; $x++) {
      if ($x % 4 == 0) {
        echo '<img src="img_'.$x.'"></div><div class="slide">';
      } else {
        echo '<img src="img_'.$x.'">';
      }
    }
  ?>
  </div>
</div>

我试图让滑块使用特定结构，其中图像嵌套在不同的div中，如下所示：

<div class="slider">
  <div class="slide active">
  <!-- -->
    <div class="slider-container">
      <div class="flexChild rowParent">
        <div class="flexChild flex-element"><img src="img_0.jpg"></div>
        <div class="flexChild columnParent">
          <div class="flexChild flex-element"><img src="img_1.jpg"></div>
          <div class="flexChild rowParent">
            <div class="flexChild flex-element"><img src="img_2.jpg"></div>
            <div class="flexChild flex-element"><img src="img_3.jpg"></div>
          </div>
        </div>
      </div>
    </div>
  <!-- -->
  </div>
</div>
<div class="slider">
  <div class="slide">
  <!-- -->
    <div class="slider-container">
      <div class="flexChild rowParent">
        <div class="flexChild flex-element"><img src="img_4.jpg"></div>
        <div class="flexChild columnParent">
          <div class="flexChild flex-element"><img src="img_5.jpg"></div>
          <div class="flexChild rowParent">
            <div class="flexChild flex-element"><img src="img_6.jpg"></div>
            <div class="flexChild flex-element"><img src="img_7.jpg"></div>
          </div>
        </div>
      </div>
    </div>
  <!-- -->
  </div>
</div>
<div class="slider">
  <div class="slide">
  <!-- -->
    <div class="slider-container">
      <div class="flexChild rowParent">
        <div class="flexChild flex-element"><img src="img_8.jpg"></div>
        <div class="flexChild columnParent">
          <div class="flexChild flex-element"><img src="img_9.jpg"></div>
          <div class="flexChild rowParent">
            <div class="flexChild flex-element"><img src="img_10.jpg"></div>
          </div>
        </div>
      </div>
    </div>
  <!-- -->
  </div>
</div>

我试图用这种结构循环遍历这些项目，但我还没有成功。如果您对如何做到这一点有任何建议，我将非常感激！我已经看了很多，但我找不到任何结果。是否可以实现，或者我应该放弃它？

Answer 1

要实现所需的结构，我们需要使用两个循环：

<?php
    $result = '';
    $x = 0;
    $items = 10;
    while($x <= $items){
        if($x == 0){
            $result .= '<div class="slider"><div class="slide active"> <!-- --> <div class="slider-container"><div class="flexChild rowParent">';
        }else{
            $result .= '<div class="slider"><div class="slide"> <!-- --> <div class="slider-container"><div class="flexChild rowParent">';
        }           

        $result .= '<div class="flexChild flex-element"><img src="img_'.$x.'.jpg"></div>';
        $result .= '<div class="flexChild columnParent">';

        $result .= '<div class="flexChild flex-element"><img src="img_'.($x+1).'.jpg"></div>';
        $result .= '<div class="flexChild rowParent">';

        for($y=2; $y<=3; $y++){
            if(($x + $y) <= $items){
                $result .= '<div class="flexChild flex-element"><img src="img_'.($x+$y).'.jpg"></div>';
            }
        }

        $result .= '</div></div></div></div><!-- --></div></div>';
        $x += 4;
    }

    echo $result;
?>

在具有特定结构的更深层次中使用模数for for循环

1 个答案: