我有以下代码从数据库中获取所有图像。所有这些图像连续显示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>";
}
}
答案 0 :(得分:0)
这是一个非常基本的Slideshow-from-PHP应用程序。它可以很容易地修改或建立。从数据库中提取图像名称(file_name
),然后将其推送到图像src值的JavaScript数组中。确保您还指定images目录(实际存储图像的位置)以匹配您自己的图像目录。包含一个简单的图像预加载器,幻灯片显示自动播放。
<?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>
答案 1 :(得分:-1)
https://www.w3schools.com/howto/howto_js_slideshow.asp
幻灯片显示,因为您已经拥有工作图像标记,所以您只需将生成的图像标记附加到幻灯片显示父元素。
我建议学习js / jquery而不是使用经典的php echo方法,这种方法既脏又过时。