如何显示来自 mysql 数据库的图像幻灯片答案

【问题标题】：How to display a slideshow of images from a mysql database如何显示来自 mysql 数据库的图像幻灯片
【发布时间】：2016-03-04 10:45:28
【问题描述】：

我有一个名为images 的表，字段为id, name, photo，photo 字段为varchar，因为图片使用php 表单存储到服务器上。在我的代码只显示表格中的 1 张图片的那一刻，请有人帮助我，以便它使用查询对所有图片进行幻灯片放映：

SELECT * FROM images WHERE name='$pagetitle'

$pagetitle 在脚本的其他地方定义。

问题出在 index.php 文件中

index.php

<!-- Image Slide Show Start -->
						
						<div style="display: flex; justify-content: center;">
						<img align="middle" src="" name="slide" border=0 width=300 height=375>
				

<?php 
require('mysqli.php');
$data = $conn->query("SELECT * FROM images WHERE name= '$pagetitle'");
$image = mysqli_fetch_array( $data );

$directory = ("/images/".$image['photo'] . "");

$conn->close();

?>				
<script>


//configure the paths of the images, plus corresponding target links
slideshowimages("<?php echo $directory ?>")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()


</script> </div><br><br>
						<!-- Image Slide Show End -->

【问题讨论】：

乍一看，您似乎同时使用了过时的mysql_ 扩展和mysqli_
函数slideshowimages有什么作用？查询返回多少条记录？
我不认为这是问题所在，因为在源代码中，php 仅将 1 张图像放入 slideshowimages 函数中。这是要在幻灯片中显示的图像的根。如果我把 php 拿出来并把图片从一个文件夹放在那里，js 工作正常。
对于一个单一的、明确的答案来说，这里可能有点太多了——试着把它分解成更小的问题；如何连接到数据库（mysqli_ 或 pdo）并检索数据，使用哪个幻灯片插件（我个人倾向于使用 unslider unslider.com）或者是否从头开始编写（现在不值得）......目前看起来你已经从这里抓取了代码，并且你试图在没有真正理解它的情况下将它们全部组合在一起......在你尝试跑步之前先学会走路;）跨度>
注意：mysql_* 函数已被弃用，它们已从 PHP 7 中删除，当您升级到该版本时，您的代码将停止工作。您不应该使用它们编写新代码，而是使用mysqli_* or PDO。

标签： javascript php html mysql

【解决方案1】：

解决的代码如下：

<?php

// Connect to the database
       require('mysqli.php');
        
// Query for a list of all existing files

$sql = "SELECT * FROM images WHERE name= '$pagetitle'";
$result = $conn->query($sql);

$directory = '';
while( $image = $result->fetch_assoc() )
    $directory .= ($directory != '' ? "," : '') . ('"/images/'.$image["photo"] . '"');



// Check if it was successfull
	if($directory != '') {
		
    // if there are images for this page, run the javascript
	?><script>


	//configure the paths of the images, plus corresponding target links			
	slideshowimages(<?php print $directory ?>)

	//configure the speed of the slideshow, in miliseconds
	var slideshowspeed=2000

	var whichlink=0
	var whichimage=0
	function slideit(){
	if (!document.images)
	return
	document.images.slide.src=slideimages[whichimage].src
	whichlink=whichimage
	if (whichimage<slideimages.length-1)
	whichimage++
	else
	whichimage=0
	setTimeout("slideit()",slideshowspeed)
	}
	slideit()


	</script>
	<?
   }  else {
        // If there are not any images for this page, leave the space blank
        echo "";
		} 
 
// Close the mysql connection
$conn->close();
?>

【讨论】：

【解决方案2】：

<?php 
$servername = "";
$username = "";
$password = "";
$dbname = "";
$conn = new mysqli($servername, $username, $password, $dbname);

//Make connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

//SQL query
$sql = "SELECT * FROM TABLE_NAME";
$result = $conn->query($sql);

if ($result->num_rows > 0) {

    while($row = $result->fetch_assoc()) {
        $dir= "" . $row["field"]. "";
       echo" <div class='content section' style='max-width:500px'>
             <img class='slides' src='$dir' style=width:100%></div>";
    }
} else {
    echo "Empty Gallery";
}
?>

<html>
<body>
<script>
var index = 0;
slideshow();
function slideshow() {
  var i;
  var x = document.getElementsByClassName("slides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  index++;
  if (index > x.length) {index = 1}    
  x[index-1].style.display = "block";  
  setTimeout(slideshow, 3000); // Change slides every 3 seconds
}
</script>
</body>
</html>

【讨论】：