diedVIPs

html knowhow

Diashow aus Online-Dateien










Automatische Diashow aus Onlinedatei

Mit en.

Quellcode So sieht´s aus
<html>
 <base target="_top">

<?php
// Diashow automatisch

$verzeichnis = "Bilder/"; // Bilderverzeichnis

if (isset($_GET["show"])) {
foreach (array_slice(scanDir($verzeichnis), 2) as $datei) {
$path = pathinfo($datei);
if (in_array(strtolower($path["extension"]), ["png", "jpg", "gif"])) {
$arr[] = ['names'=>$verzeichnis . $datei];
}
}
echo json_encode($arr);
exit;
}
?>
<script>
window.addEventListener("load", function () {
var xhr = new XMLHttpRequest();
xhr.open("GET", document.URL+"?show");
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 &&
xhr.status == 200) {
var obj = JSON.parse(xhr.responseText);
var i = 1;
document.getElementById("dummy").src = obj[0].names;
setInterval(function () {
if (i == obj.length) i = 0;
document.getElementById("dummy").src = obj[i].names;
i++;
}, 5000); // Geschwindigkeit - Angabe in Millisekunden
}
}
});
</script>

<style type="text/css">
body {font-family: Verdana, Arial, Sans-Serif;}
h2 {font-weight: normal;}
figure img#dummy {max-width: 100%;height: auto;display: block;margin: 1rem auto 1rem auto;box-shadow: 1px 1px 5px #888888;border: solid 1px #000000;}
</style>
<body >
<figure><img src="" id="dummy"></figure>

</body>
</html>









Kontakt    Datenschutz    Impressum