Aquí hay una aplicación Slideshow-from-PHP muy básica. Se puede modificar o construir fácilmente. Nombres de imágenes (file_name ) se extraen de la base de datos y luego se insertan en una matriz JavaScript de valores src de imagen. Asegúrese de especificar también el directorio de imágenes (donde se almacenan realmente las imágenes) para que coincida con el suyo. Se incluye un precargador de imágenes simple, ya que la presentación de diapositivas se reproduce automáticamente.
<?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>
