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 |
|