我试图学习PHP并将其与我的站点的Bootstrap库一起使用。我正在使用此处所示的自举轮播
我想要实现的是带有字幕的轮播，而我在图片中显示的“机器名称”将是一个超链接，它将带您到该页面以获取更多信息。我有一个MySQL数据库，其中包含计算机名称和有关ImagePath所在位置的ImagePath。
所以我的代码目前如下所示-
<?php
while($row = mysql_fetch_array($result))
{
?>
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<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>
<img data-src="holder.js/900x800/auto/#777:#777" style="height: 400px; width: 400px;" alt="First slide image" src="<?php echo $row['MachineImagePath'] ?>"/>
<div class="finlay-carousel-caption">
<h3><?php echo $row['MachineName']?></h3>
<div>
<p>
Click the link above for more details about <?php echo $row['MachineName']>
</p>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<?php
}
mysql_close($connection);
?>
当前，不是将每个图像放置在转盘内，而是为页面下方的每个图像创建一个新的转盘。如果<carousel-example-captions>html在while循环之外，那么它将创建一次，然后img标签将在您单击下一步>和prev <按钮时为每张幻灯片拾取新图像。
另请注意<h3><?php echo $row['MachineName']?></h3>--我尚未将标题转换为超链接，因为我想先使轮播正常工作。
我最近添加了一个带有mysql数据库链接的轮播。问题是您在while语句中创建了新的轮播代码。如果您将它取出来，而只是将新的幻灯片命令放进去，它将很完美。
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$counter = 1;
while($row = mysql_fetch_array($result)){
?>
<div class="item<?php if($counter <= 1){echo " active"; } ?>">
<a href="">
<img data-src="holder.js/900x800/auto/#777:#777" style="height: 400px; width: 400px;" alt="First slide image" src="<?php echo $row['MachineImagePath'] ?>"/>
</a>
<div class="finlay-carousel-caption">
<h3><?php echo $row['MachineName']?></h3>
<p>Click the link above for more details about <?php echo $row['MachineName']>; ?></p>
</div>
</div>
<?php
$counter++;
}
mysql_close($connection);
?>
<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>
如果您从mysql语句中获得了行数，则可以更改指标部分，使其具有一个循环，从而允许无限数量的幻灯片。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句