html knowhow

Manuelle Bildershow aus einem Verzeichnis

So sieht´s aus

Quellcode

<html>
<head>

<style type="text/css">
.slideshow {list-style-type: none;}
.slideshow,
.slideshow:after { position: absolute; width: 100%; height: 70%; left: 0px; z-index: 0; }
.slideshow li span { position: absolute; width: 100%; height: 70%; top: 0px; left: 0px; background-size: 100%;
background-position: 50% 50%; background-repeat: no-repeat; opacity: 0; z-index: 0; animation: imageAnimation 30s linear infinite 0s; }
.slideshow li:nth-child(1) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-Dinner.jpg"); }
.slideshow li:nth-child(2) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-MSGS.jpg"); animation-delay: 6s; }
.slideshow li:nth-child(3) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-HBart.jpg"); animation-delay: 12s; }
.slideshow li:nth-child(4) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-Hdil.jpg"); animation-delay: 18s; }
.slideshow li:nth-child(5) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-Ovoice.jpg"); animation-delay: 24s; }
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }}
.no-cssanimations .cb-slideshow li span {opacity: 1;}
</style>
</head>

<body >
<?php
// Kleine Diashow
$pix = glob("../Bilder/*");
$id = (isset($_GET['id']) and file_exists($pix[$_GET['id']])) ? (int) ($_GET['id']) : 0;
echo '<a style="text-decoration:none;font-size:4em;" href="?id=' . ($id - 1) . '"><</a> <img src="' . $pix[$id] . '">
<a style="text-decoration:none;font-size:4em;" href="?id=' . ($id + 1) . '">></a>';
?>
</body>

</html>

Kontakt Datenschutz Impressum