Oto bardzo podstawowa aplikacja do pokazu slajdów z PHP. Można go łatwo modyfikować lub rozbudowywać. Nazwy obrazów (file_name ) są pobierane z bazy danych, a następnie umieszczane w tablicy JavaScript zawierającej wartości image src. Upewnij się, że określiłeś również katalog obrazów (w którym obrazy są faktycznie przechowywane), aby pasował do twojego własnego. Dołączony jest prosty program do wstępnego ładowania obrazów, ponieważ pokaz slajdów jest automatycznie odtwarzany.
<?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>
