Twiiter Bootstrap轮播使用PHP进行动态制作 [英] Twiiter Bootstrap carousel making dynamic with PHP
问题描述
我正在尝试制作一个使用Twitter Bootstrap默认JavaScript和CSS的轮播，但是应该从MySQL数据库中获取图像。
I am trying to make a carousel that uses Twitter Bootstrap default JavaScript and CSS but the images should be fetched from the MySQL database.
轮播的HTML我正在尝试使用php使其动态化，如下所示：
The HTML for the carousel that i am trying to make dynamic with php is like this:
<div class="carousel-inner">
<div class="active item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
我期望的PHP文件的最终结果是这样
The end result for PHP file that i'm expecting is like this
<div class="carousel-inner">
<?php renderAds(); ?>
</div>
我编写的PHP函数是这样的：
The PHP function that i wrote is like this :
function renderAds(){
$query = queryAds();
$query_exe = mysql_query($query);
if(mysql_num_rows($query_exe) == 0){
echo '<img src="images/sampleAd.jpg" >';
}else{
$numb =1;
$flag =1;
while($fetched_data = mysql_fetch_array($query_exe)){
if($numb == 1){
if($flag == 1){
echo '<div class="active item">';
}else{
echo '<div class="item">';
}
}elseif($numb == 4){
echo '<a href="'.$fetched_data['url'].'" class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>';
echo '</div>';
$numb =0;
}else{
echo '<a href="'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
}
$numb++;
$flag++;
}
echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>';
echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>';
}
}
此处，与twitter bootstrap的默认轮播不同，我为每个幻灯片制作了4张图片，我希望每个幻灯片过渡都包含4张图片，而不是默认情况下为一张幻灯片制作一张图片。在HTML中，它可以工作，但是当我用PHP函数替换它时，第一张幻灯片可以工作，但是，如果我在转盘中按下下一个箭头，整个div就会崩溃。
Here, by differing from default carousel of twitter bootstrap, i made each slide with 4 images, i expect that each slide transition contains 4 images instead of as by default the single image for one slide. In HTML it works but when I replace it with my PHP function first slide works but if i press next arrow in carousel whole div collapses.
我如何使其工作？
注意：此处的最后一个图像必须包含marginLast类，而其他
应该具有marginTop和pull-left类。 / p>
Note : Here Last image must contain the class marginLast, and the other should have marginTop and pull-left classes.
我希望在html中呈现的内容是这样的：
What I expect to be rendered in html is like this:
<div class="carousel-inner">
<div class="active item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<div class="item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<div class="item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
我如何使我的PHP函数显示上述结果标记？
How can i make my PHP function to display result markup like above?
编辑：我得到的输出是这样的：
Edit : The Output i get is like this:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<a href="xx2" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
<a href="xx" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
<a href="sample.com" class="pull-left marginLast" ><img src="images/sampleAd.jpg"></a>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div><!-- end carousel-inner -->
</div><!-- myCarousel -->
根据标记，这应该可以，但是不能，如果没有更多内容，默认情况下为箭头幻灯片而不是幻灯片应该被禁用，但是可以单击。
According to markup this should work but it doesn't, the arrow by default if there is no more slide than one should be disabled but it is clickable.
推荐答案
我认为我想出了自己的问题的答案，即使以上所有答案给了我很多想法。谢谢大家
I think i came out with answer for my own question, even though all the above answers gave me many ideas. Thank you all
function renderAds(){
$query = queryAds();
$query_exe = mysql_query($query);
if(mysql_num_rows($query_exe) == 0){
echo '<img src="images/sampleAd.jpg" >';
}else{
$numb =1;
$flag =1;
echo '<div class="carousel-inner">';
while($fetched_data = mysql_fetch_array($query_exe)){
if($numb == 1){
if($flag == 1){
echo '<div class="active item">';
}else{
echo '<div class="item">';
}
echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
}elseif($numb == 4){
echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>';
$numb = 0;
echo '</div>';
}else{
echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
}
$numb++;
$flag++;
}
if($numb > 1 && $numb < 4 ){
echo '</div>';
echo '</div>';
}elseif($numb == 1){
echo '</div>';
}elseif($numb == 4){
echo '</div>';
echo '</div>';
}
echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>';
echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>';
}
}
这篇关于Twiiter Bootstrap轮播使用PHP进行动态制作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
