Question

我有一个旋转木马滑块，我必须动态工作。我是PHP新手。我怎么能这样做？

我的滑码：

<div class="carousel-inner">
    <div class="item active">
        <div class="row">
          <div class="col-md-3"><a href="#" class="thumbnail"><img src="images/brands/br1.jpg" class="brn-sht" style="width: 90%"><br> 
          <img src="images/brands/b1.png" alt="Image" style="max-width:100%; margin-top: 30px;"> <p class="edd-txt-br">eddies fashion</p></a></div>

          <div class="col-md-3"><a href="#" class="thumbnail"><img src="images/brands/br1.jpg" class="brn-sht" style="width: 90%"><br> 
          <img src="images/brands/b2.png" alt="Image" style="max-width:100%; margin-top: 30px;"><p class="edd-txt-br">eddies fashion</p></a></div>

          <div class="col-md-3"><a href="#" class="thumbnail"><img src="images/brands/br1.jpg" class="brn-sht" style="width: 90%"><br>
          <img src="images/brands/b3.png" alt="Image" style="max-width:100%; margin-top: 30px;"><p class="edd-txt-br">eddies fashion</p></a></div>

          <div class="col-md-3"><a href="#" class="thumbnail"><img src="images/brands/br1.jpg" class="brn-sht" style="width: 90%"><br>
          <img src="images/brands/b4.png" alt="Image" style="max-width:100%; margin-top: 30px;"><p class="edd-txt-br">eddies fashion</p></a></div>
        </div><!--.row-->
    </div><!--.item-->

    <div class="item">
        <div class="row">
            <div class="col-md-3"><a href="#" class="thumbnail"><img src="images/brands/br1.jpg" class="brn-sht" style="width: 90%"><br>
            <img src="images/brands/b1.png" alt="Image" style="max-width:100%; margin-top: 30px;"><p class="edd-txt-br">eddies fashion</p></a></div>

            <div class="col-md-3"><a href="#" class="thumbnail"><img src="images/brands/br1.jpg" class="brn-sht" style="width: 90%"><br>
            <img src="images/brands/b2.png" alt="Image" style="max-width:100%; margin-top: 30px;"><p class="edd-txt-br">eddies fashion</p></a></div>

            <div class="col-md-3"><a href="#" class="thumbnail"><img src="images/brands/br1.jpg" class="brn-sht" style="width: 90%"><br>
            <img src="images/brands/b3.png" alt="Image" style="max-width:100%; margin-top: 30px;"><p class="edd-txt-br">eddies fashion</p></a></div>

            <div class="col-md-3"><a href="#" class="thumbnail"><img src="images/brands/br1.jpg" class="brn-sht" style="width: 90%"><br>
            <img src="images/brands/b4.png" alt="Image" style="max-width:100%; margin-top: 30px;"><p class="edd-txt-br">eddies fashion</p></a></div>
        </div><!--.row-->
    </div><!--.item-->

Answer 1

这就是循环的力量所在。

你可以做到这一点的一种方法是构建一个二维数组来保存每个图像/文本，然后用foreach循环遍历它。

$images = array();
$images[] = array('thumb'=>'br1.jpg', 'src'=>'b1.png', 'text'=>'eddies fashion #1');
$images[] = array('thumb'=>'br2.jpg', 'src'=>'b2.png', 'text'=>'eddies fashion #2');
$images[] = array('thumb'=>'br3.jpg', 'src'=>'b3.png', 'text'=>'eddies fashion #3');
$images[] = array('thumb'=>'br4.jpg', 'src'=>'b4.png', 'text'=>'eddies fashion #4');

print '<div class="item active">';
print '        <div class="row">';
    foreach ($images AS $image)
    {
        print '<div class="col-md-3"><a href="#" class="thumbnail">';
        print '<img src="images/brands/' . $image['thumb'] . '" class="brn-sht" style="width: 90%"><br>';
        print '<img src="images/brands/' . $image['src'] . '" alt="Image" style="max-width:100%; margin-top: 30px;">';
        print '<p class="edd-txt-br">' . $image['text'] . '</p>';
        print '</a></div>';
    }
print '        </div><!--.row-->';
print '</div><!--.item-->';

如何动态创建轮播滑块

1 个答案: