php – 循环显示图像从db逐个显示到bootstrap轮播

发布时间：2020-12-13 15:59:24 所属栏目：PHP教程来源：网络整理

导读：尝试在codeigniter中的foreach循环中显示来自数据库的轮播图像.以下代码一次显示所有图像.如何逐个在滑块内显示图像？还有下一个和前一个按钮不起作用？ div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" !-- Indicators --

尝试在codeigniter中的foreach循环中显示来自数据库的轮播图像.以下代码一次显示所有图像.如何逐个在滑块内显示图像？还有下一个和前一个按钮不起作用？

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">

    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner" role="listbox">

    <?php $i = 1; ?>
    <?php $item_class = ($i == 1) ? 'item active' : 'item'; ?>
    <div class="<?php echo $item_class; ?>">=
        <a href="#">
            <?php foreach ($m->result() as $row)  :
              $Player=$row->image;
              echo "<img src='http://opunletter.com/" .  $Player . "'";
            ?>
        </a>
    </div>
    <?php $i++; ?>
    <?php endforeach; ?> 

    </div>

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div><!-- /.carousel -->

解决方法

<?php
$i  = 1;
foreach ($m->result() as $row) {
    $Player     = $row->image;
    $item_class = ($i == 1) ? 'item active' : 'item';
?>
<div class="<?php echo $item_class; ?>">
    <a href="#">
        <img src="http://opunletter.com/<?php echo $Player; ?>" />
    </a>
</div>
<?php
    $i++;
}
?>

你需要将div.item保留在循环中以封闭每个单独的图像.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!