如何在JavaScript图像滑块中显示MySQL数据库中的图像？_Javascript_Php_Jquery_Mysql

如何在JavaScript图像滑块中显示MySQL数据库中的图像？

javascript php jquery mysql

如何在JavaScript图像滑块中显示MySQL数据库中的图像？,javascript,php,jquery,mysql,Javascript,Php,Jquery,Mysql,我有下面的代码，从数据库中获取所有图像。所有这些图像以3行显示，然后开始下一行。我想要一个图像滑块，从数据库中获取所有图像并显示它们。任何包含JavaScript代码的帮助都会非常有用，因为我并不擅长。谢谢 $sql = "SELECT FILE_NAME FROM images LIMIT 0,6"; $result = mysqli_query($conn, $sql) or die("bad request: $sql"); $i = 0; while($r

我有下面的代码，从数据库中获取所有图像。所有这些图像以3行显示，然后开始下一行。我想要一个图像滑块，从数据库中获取所有图像并显示它们。任何包含JavaScript代码的帮助都会非常有用，因为我并不擅长。谢谢

$sql = "SELECT FILE_NAME FROM images LIMIT 0,6";
    $result = mysqli_query($conn, $sql) or die("bad request: $sql");
        $i = 0;
    while($row = mysqli_fetch_assoc($result)) {
        if($i%3 == 0) 
        {
            echo "<tr>";
        }
        echo"<td><img src='user_data/{$row['FILE_NAME']}' width=200 height=200></td>";
        if($i%3 == 2) {
            echo"</tr>";
        }
    }

$sql=“从图像中选择文件名限制为0,6”；
$result=mysqli_query（$conn，$sql）或die（“错误请求：$sql”）；
$i=0；
while（$row=mysqli\u fetch\u assoc（$result））{
如果（$i%3==0）
{
回声“；
}
回声“；
如果（$i%3==2）{
回声“；
}
}

这是一个非常基本的PHP应用程序幻灯片。它可以很容易地修改或构建。图像名称（

file\u name

）从数据库中提取，然后推送到图像src值的JavaScript数组中。确保您还指定了图像目录（图像实际存储的位置）以匹配您自己的目录。包括一个简单的图像预加载程序，如幻灯片自动播放

<?php
$conn = new mysqli('localhost', 'root', 'password', 'images')
  or trigger_error('Connection failed.', E_USER_NOTICE);
}
$conn->set_charset('utf8');
$paths = [];
$dir = "./pics"; // images directory (change to suit)

$stmt = $conn->prepare("SELECT `file_name` FROM `images`");
$stmt->execute();
$stmt->bind_result($file);
while ($stmt->fetch()){
  $paths[] = $dir . "/" . $file;
}
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slideshow from PHP</title>
</head>
<body>
<div>
  <!-- may set first image src in markup so initially visible -->
  <img id="slide" src="./pics/image1.jpg" alt="slideshow">
</div>
<script>
var time = 5000,    // time between images
    i = 0,              // index for changing images
    images = [],    // array of img src from PHP
    preloads = [],      // array of preloaded images
    slide = document.getElementById("slide");

images = <?php echo json_encode($paths); ?>; // from PHP to Js array
var len = images.length;

function changeImg(){
  slide.src = preloads[i].src;
  if (++i > len-1){
    i = 0;
  }
  setTimeout(changeImg, time);
}
function preload(){
  for (var c=0; c<len; c++){
    preloads[c] = new Image;
    preloads[c].src = images[c];
  }
}
window.addEventListener("load", function(){
  preload();
  setTimeout(changeImg, time);
});
</script>
</body>
</html>


从PHP播放幻灯片
var time=5000，//图像之间的时间
i=0，//用于更改图像的索引
images=[]，//来自PHP的img src数组
预加载=[]，//预加载图像的数组
幻灯片=document.getElementById（“幻灯片”）；
图像=；//从PHP到Js数组
var len=images.length；
函数更改img（）{
slide.src=预载[i].src；
如果（++i>len-1）{
i=0；
}
设置超时（更改，时间）；
}
函数预加载（）{
对于（var c=0；cWelcome to StackOverflow！请注意，在发布问题之前，您应该已经研究过您的问题并尝试解决它。如果您仍然有特定问题，您可以发布特定问题，包括您迄今为止尝试过的问题的详细信息。请阅读并澄清PM的请求：第一个数据库映像首先由JavaScript显示-通过从图像标记中删除src属性来检查这一点，尝试增加load setTimeout调用中的时间变量。如果只需要数据库中的第一个图像，只需在查询字符串的末尾添加限制1。PHP和Js脚本都将只获取第一个图像，没有问题。删除src属性只会显示编写的“slideshow”，然后我必须等待五秒钟才能收到im出现年龄。我希望幻灯片从我无法理解的第一个图像开始，请帮助，谢谢！在代码末尾的第二个setTimeout调用中，只需更改时间参数，即可修改初始延迟。时间值为5000（毫秒），因此将该调用更改为类似setTimeout的值（changeImg，50）；将直接在您的本地服务器上显示第一个图像。请注意，对于真正的服务器，在页面加载时立即运行幻灯片放映对于连接速度较慢的用户来说可能不是最好的选择，尤其是在有许多图像的情况下。5秒的延迟旨在允许进行一些预加载。非常好，感谢您的帮助！