我想在我的滑块中显示图像
I want to show images in my slider
我想在 slider.i 中显示图像,选择了数据库中的路径,但在滑块中仅显示第一张图像,但另外 2 张图像路径不是来自 database.i 使用的 mysqli_fetch_array获取图像的路径。请帮助我。
<?php
$con=mysqli_connect('localhost','root','','builder');
?>
<?php
$sql="SELECT `path` FROM `slider` ";
$res=mysqli_query($con,$sql);
$row=mysqli_fetch_array($res,MYSQLI_BOTH);
?>
<!--Slider-->
<section id="slide-show">
<div id="slider" class="sl-slider-wrapper">
<!--Slider Items-->
<div class="sl-slider">
<!--Slider Item1-->
<div class="sl-slide item1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="container">
<img class="pull-right" src="admin/<?php echo $row[0]; ?>" alt="" />
<h2>Creative Ideas</h2>
<h3 class="gap">Tincidunt condimentum eros</h3>
<a class="btn btn-large btn-transparent" href="#">Learn More</a>
</div>
</div>
</div>
<!--/Slider Item1-->
<!--Slider Item2-->
<div class="sl-slide item2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="container">
<img class="pull-right" src="admin/<?php echo $row[1]; ?>" alt="" />
<h2>Planning & Analysis</h2>
<h3 class="gap">Aenean ultricies mi vitast</h3>
<a class="btn btn-large btn-transparent" href="#">Learn More</a>
</div>
</div>
</div>
<!--Slider Item2-->
<!--Slider Item3-->
<div class="sl-slide item3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="container">
<img class="pull-right" src="admin/<?php echo $row[2]; ?>" alt="" />
<h2>Unique Solutions</h2>
<h3 class="gap">Breatures who have been utterly</h3>
<a class="btn btn-large btn-transparent" href="#">Learn More</a>
</div>
</div>
</div>
<!--Slider Item3-->
</div>
<!--/Slider Items-->
<!--Slider Next Prev button-->
<nav id="nav-arrows" class="nav-arrows">
<span class="nav-arrow-prev"><i class="icon-angle-left"></i></span>
<span class="nav-arrow-next"><i class="icon-angle-right"></i></span>
</nav>
<!--/Slider Next Prev button-->
</div>
<!-- /slider-wrapper -->
</section>
<!--/Slider-->
<!--Services-->
<section id="services">
<div class="container">
<div class="center gap">
<h3>What We Offer</h3>
<p class="lead">Look at some of the recent projects we have completed for our valuble clients</p>
</div>
<div class="row-fluid">
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-globe icon-medium"></i>
</div>
<div class="media-body">
<h4 class="media-heading">Web Design</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-thumbs-up-alt icon-medium"></i>
</div>
<div class="media-body">
<h4 class="media-heading">Graphic Design</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-leaf icon-medium icon-rounded"></i>
</div>
<div class="media-body">
<h4 class="media-heading">Email Marketing</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
</div>
<div class="gap"></div>
<div class="row-fluid">
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-shopping-cart icon-medium"></i>
</div>
<div class="media-body">
<h4 class="media-heading">Ecommerce Solution</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-globe icon-medium"></i>
</div>
<div class="media-body">
<h4 class="media-heading">SEO & Solution</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-globe icon-medium"></i>
</div>
<div class="media-body">
<h4 class="media-heading">Bootstrap</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/Services-->
<section id="recent-works">
<div class="container">
<div class="center">
<h3>Our Recent Works</h3>
<p class="lead">Look at some of the recent projects we have completed for our valuble clients</p>
</div>
<div class="gap"></div>
<ul class="gallery col-4">
<!--Item 1-->
<li>
<div class="preview">
<img alt=" " src="images/portfolio/thumb/item1.jpg">
<div class="overlay">
</div>
<div class="links">
<a data-toggle="modal" href="#modal-1"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
</div>
</div>
<div class="desc">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
<div id="modal-1" class="modal hide fade">
<a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
<div class="modal-body">
<img src="images/portfolio/full/item1.jpg" alt=" " width="100%" style="max-height:400px">
</div>
</div>
</li>
<!--/Item 1-->
<!--Item 2-->
<li>
<div class="preview">
<img alt=" " src="images/portfolio/thumb/item2.jpg">
<div class="overlay">
</div>
<div class="links">
<a data-toggle="modal" href="#modal-1"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
</div>
</div>
<div class="desc">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
<div id="modal-1" class="modal hide fade">
<a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
<div class="modal-body">
<img src="images/portfolio/full/item2.jpg" alt=" " width="100%" style="max-height:400px">
</div>
</div>
</li>
<!--/Item 2-->
<!--Item 3-->
<li>
<div class="preview">
<img alt=" " src="images/portfolio/thumb/item3.jpg">
<div class="overlay">
</div>
<div class="links">
<a data-toggle="modal" href="#modal-3"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
</div>
</div>
<div class="desc">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
<div id="modal-3" class="modal hide fade">
<a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
<div class="modal-body">
<img src="images/portfolio/full/item3.jpg" alt=" " width="100%" style="max-height:400px">
</div>
</div>
</li>
<!--/Item 3-->
<!--Item 4-->
<li>
<div class="preview">
<img alt=" " src="images/portfolio/thumb/item4.jpg">
<div class="overlay">
</div>
<div class="links">
<a data-toggle="modal" href="#modal-4"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
</div>
</div>
<div class="desc">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
<div id="modal-4" class="modal hide fade">
<a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
<div class="modal-body">
<img src="images/portfolio/full/item4.jpg" alt=" " width="100%" style="max-height:400px">
</div>
</div>
</li>
<!--/Item 4-->
</ul>
</div>
</section>
这样试试:
$quer = $mycon->query("SELECT * FROM slider ORDER BY whatever DESC");
if ($quer) {
while($querob = $quer->fetch_object())
{
echo '<img class="pull-right" src="
'.$querob->image_name.'" />
}
}
尝试这样的事情
<?php
$sql="SELECT `path` FROM `slider` ";
$rows = array();
while($row=mysqli_fetch_array($res,MYSQLI_BOTH)){
$rows[] = $row;
}
$final = array_map('current', $rows);
echo $final[0];
echo $final[1];
?>
我想在 slider.i 中显示图像,选择了数据库中的路径,但在滑块中仅显示第一张图像,但另外 2 张图像路径不是来自 database.i 使用的 mysqli_fetch_array获取图像的路径。请帮助我。
<?php
$con=mysqli_connect('localhost','root','','builder');
?>
<?php
$sql="SELECT `path` FROM `slider` ";
$res=mysqli_query($con,$sql);
$row=mysqli_fetch_array($res,MYSQLI_BOTH);
?>
<!--Slider-->
<section id="slide-show">
<div id="slider" class="sl-slider-wrapper">
<!--Slider Items-->
<div class="sl-slider">
<!--Slider Item1-->
<div class="sl-slide item1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="container">
<img class="pull-right" src="admin/<?php echo $row[0]; ?>" alt="" />
<h2>Creative Ideas</h2>
<h3 class="gap">Tincidunt condimentum eros</h3>
<a class="btn btn-large btn-transparent" href="#">Learn More</a>
</div>
</div>
</div>
<!--/Slider Item1-->
<!--Slider Item2-->
<div class="sl-slide item2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="container">
<img class="pull-right" src="admin/<?php echo $row[1]; ?>" alt="" />
<h2>Planning & Analysis</h2>
<h3 class="gap">Aenean ultricies mi vitast</h3>
<a class="btn btn-large btn-transparent" href="#">Learn More</a>
</div>
</div>
</div>
<!--Slider Item2-->
<!--Slider Item3-->
<div class="sl-slide item3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="container">
<img class="pull-right" src="admin/<?php echo $row[2]; ?>" alt="" />
<h2>Unique Solutions</h2>
<h3 class="gap">Breatures who have been utterly</h3>
<a class="btn btn-large btn-transparent" href="#">Learn More</a>
</div>
</div>
</div>
<!--Slider Item3-->
</div>
<!--/Slider Items-->
<!--Slider Next Prev button-->
<nav id="nav-arrows" class="nav-arrows">
<span class="nav-arrow-prev"><i class="icon-angle-left"></i></span>
<span class="nav-arrow-next"><i class="icon-angle-right"></i></span>
</nav>
<!--/Slider Next Prev button-->
</div>
<!-- /slider-wrapper -->
</section>
<!--/Slider-->
<!--Services-->
<section id="services">
<div class="container">
<div class="center gap">
<h3>What We Offer</h3>
<p class="lead">Look at some of the recent projects we have completed for our valuble clients</p>
</div>
<div class="row-fluid">
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-globe icon-medium"></i>
</div>
<div class="media-body">
<h4 class="media-heading">Web Design</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-thumbs-up-alt icon-medium"></i>
</div>
<div class="media-body">
<h4 class="media-heading">Graphic Design</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-leaf icon-medium icon-rounded"></i>
</div>
<div class="media-body">
<h4 class="media-heading">Email Marketing</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
</div>
<div class="gap"></div>
<div class="row-fluid">
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-shopping-cart icon-medium"></i>
</div>
<div class="media-body">
<h4 class="media-heading">Ecommerce Solution</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-globe icon-medium"></i>
</div>
<div class="media-body">
<h4 class="media-heading">SEO & Solution</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
<div class="span4">
<div class="media">
<div class="pull-left">
<i class="icon-globe icon-medium"></i>
</div>
<div class="media-body">
<h4 class="media-heading">Bootstrap</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/Services-->
<section id="recent-works">
<div class="container">
<div class="center">
<h3>Our Recent Works</h3>
<p class="lead">Look at some of the recent projects we have completed for our valuble clients</p>
</div>
<div class="gap"></div>
<ul class="gallery col-4">
<!--Item 1-->
<li>
<div class="preview">
<img alt=" " src="images/portfolio/thumb/item1.jpg">
<div class="overlay">
</div>
<div class="links">
<a data-toggle="modal" href="#modal-1"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
</div>
</div>
<div class="desc">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
<div id="modal-1" class="modal hide fade">
<a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
<div class="modal-body">
<img src="images/portfolio/full/item1.jpg" alt=" " width="100%" style="max-height:400px">
</div>
</div>
</li>
<!--/Item 1-->
<!--Item 2-->
<li>
<div class="preview">
<img alt=" " src="images/portfolio/thumb/item2.jpg">
<div class="overlay">
</div>
<div class="links">
<a data-toggle="modal" href="#modal-1"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
</div>
</div>
<div class="desc">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
<div id="modal-1" class="modal hide fade">
<a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
<div class="modal-body">
<img src="images/portfolio/full/item2.jpg" alt=" " width="100%" style="max-height:400px">
</div>
</div>
</li>
<!--/Item 2-->
<!--Item 3-->
<li>
<div class="preview">
<img alt=" " src="images/portfolio/thumb/item3.jpg">
<div class="overlay">
</div>
<div class="links">
<a data-toggle="modal" href="#modal-3"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
</div>
</div>
<div class="desc">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
<div id="modal-3" class="modal hide fade">
<a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
<div class="modal-body">
<img src="images/portfolio/full/item3.jpg" alt=" " width="100%" style="max-height:400px">
</div>
</div>
</li>
<!--/Item 3-->
<!--Item 4-->
<li>
<div class="preview">
<img alt=" " src="images/portfolio/thumb/item4.jpg">
<div class="overlay">
</div>
<div class="links">
<a data-toggle="modal" href="#modal-4"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
</div>
</div>
<div class="desc">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
<div id="modal-4" class="modal hide fade">
<a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
<div class="modal-body">
<img src="images/portfolio/full/item4.jpg" alt=" " width="100%" style="max-height:400px">
</div>
</div>
</li>
<!--/Item 4-->
</ul>
</div>
</section>
这样试试:
$quer = $mycon->query("SELECT * FROM slider ORDER BY whatever DESC");
if ($quer) {
while($querob = $quer->fetch_object())
{
echo '<img class="pull-right" src="
'.$querob->image_name.'" />
}
}
尝试这样的事情
<?php
$sql="SELECT `path` FROM `slider` ";
$rows = array();
while($row=mysqli_fetch_array($res,MYSQLI_BOTH)){
$rows[] = $row;
}
$final = array_map('current', $rows);
echo $final[0];
echo $final[1];
?>