从数据库中获取数据后如何在 div 中滑动
Posted
技术标签:
【中文标题】从数据库中获取数据后如何在 div 中滑动【英文标题】：after fetching data from database how to slide in div 【发布时间】：2016-09-09 13:09:50 【问题描述】：我正在尝试从数据库中获取数据块后如何滑动它。 我尝试了很多但没有得到结果。请帮助我找出解决方案 这是我的代码
<html>
<head>
</head>
<body>
<?php
$servername="localhost";
$username="root";
$password="";
$db="lalcoresidency";
$conn=mysqli_connect($servername,$username,$password,$db);
if(!$conn)
die("connection failed:".mysqli_connect_error());
?>
<div class="flexslider">
<ul class="slides">
<?php
$query="select * from testimonial order by r_id desc";
$result = mysqli_query($conn, $query);
while($row=mysqli_fetch_array($result))
?>
<li>
<?php echo $row['review'];?>
</li>
<?php
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(document).ready(function()
$('.flexslider').carousel(
interval: 3200
);
);
</script>
</body>
这已经花费了我的时间，但我没有得到解决方案。此代码仅逐行显示数据
my code output
"Loving Staff Welcoming and helpful... Kind and welcome the food is great. Breakfast included."
"Total value for money."
"Excellent facilities with good location and very co-operative and efficient staff."
"Accommodation worth the money paid for... Staff were very helpful and in-house car hire rates were so reasonable."
"An excellent stay... Loved the stay and definitely look forward to keep going back for our next stay."
它一个一个地显示数据。但我想显示第一行数据，然后在滑动后显示第二行。然后在滑动第三行后。 请帮助我找到解决方案
【问题讨论】：
<div class="flexslider"><ul class="slides"> 关闭在哪里？
在结束括号之后..
它不在您提供的代码中。
是的..在复制它被删除后，我试图将 div 放在右括号之后，但它给出了相同的答案
【参考方案1】：
这是因为 .carousel 没有在 jQuery 中定义。
这是一个 jQuery 插件，您可以从他们的网站下载。
https://plugins.jquery.com/jcarousel/
别忘了关闭<div> 和<ul> 标签。
【讨论】：
【参考方案2】：jQuery 本身不提供.carousel-function，你用的是什么插件？
还可以尝试使用控制台查找 javascript 错误（Ctrl+Shift+K in Firefox、Ctrl+Shift+J in Chrome）
【讨论】：
【参考方案3】：你需要先纠正代码，这是错误的编程方式。只需使用下面的代码，它就可以完美运行。
始终尝试将代码逻辑与 html 分开。创建函数来处理代码逻辑。
更正代码示例：
<html>
<head>
<title>Testimonials</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.css"/>
</head>
<body>
<?php
$dbConnectionObject = getConnection('localhost', 'root', '', 'lalcoresidency');
if ($dbConnectionObject != false)
//Get all data for slides
$slides = getAllTestimonialsReviews($dbConnectionObject);
//Check if slides count greater thab zero
if (count($slides) > 0)
?>
<div class="flexslider">
<ul class="slides">
<?php
foreach ($slides as $slide)
?>
<li><?php echo $slide['review']; ?></li>
<?php ?>
</ul>
</div>
<?php
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.js"></script>
<script>
(function ($)
jQuery(document).ready(function ()
jQuery('.flexslider').flexslider(
animation: "slide",
animationLoop: true,
itemWidth: 200,
itemMargin: 5
);
);
(jQuery));
</script>
</body>
<?php
// Turn on error reporting
error_reporting(1);
ini_set('display_errors', true);
//Get database connection object
function getConnection($host, $user, $pass, $databasename)
//Check empty
if (empty($host) || empty($user) || empty($pass) || empty($databasename))
die("Invalid db connection parameters ");
//vars
$servername = $host;
$username = $user;
$password = $pass;
$db = $databasename;
//conenction object
$connectionObject = mysqli_connect($servername, $username, $password, $db);
if (!$connectionObject)
die("connection failed:" . mysqli_connect_error());
return $connectionObject;
//Get all testimonials
function getAllTestimonialsReviews($connectionObject = null)
//empty check
if (empty($connectionObject))
die("No conenction object in getALLTestimonialsReviews function");
//Query
$query = "select `review` from testimonial order by r_id desc";
//query result set
$result = mysqli_query($connectionObject, $query);
$resultSet = array();
while ($row = mysqli_fetch_assoc($result))
//grab all results in array
$resultSet[] = $row;
//return result
return $resultSet;
【讨论】：
kapil .your 代码显示 ..Invalid db connection parameters...errors @nushrat 您只需要检查是否有正确的详细信息用于数据库连接。我刚刚从您的代码中复制，并且我通过创建数据库和表在本地测试了此代码，它运行良好。只需检查下面的行，如果这些详细信息根据您的配置是正确的。 $dbConnectionObject = getConnection('localhost', 'root', '', 'lalcoresidency');以上是关于从数据库中获取数据后如何在 div 中滑动的主要内容，如果未能解决你的问题，请参考以下文章
在Vue中使用了Swiper ，动态从后台获取数据的之后，swiper滑动失效？？