HTML: Fullscreen slideshow

<html>
<head>
<style>
#slideshow { position:relative;}
#slideshow img { position:absolute; max-width:100% }
.js #slideshow img { opacity:0 }
.js #slideshow .show, #slideshow .show { opacity:1; #-webkit-animation:fadetoblack 1s; #animation:fadetoblack 1s }
@-webkit-keyframes fadetoblack {
	0%   { opacity:0 }
	25%  { opacity:1 }
	75%  { opacity:1 }
	100% { opacity:0 }
	}
@keyframes fadetoblack {
	0%   { opacity:0 }
	25%  { opacity:1 }
	75%  { opacity:1 }
	100% { opacity:0 }
	}
</style>
</head>
<body style="margin: 0;">

<div id="slideshow">
<?php
$imgs = glob('../location/*.{jpg,jpeg,png,JPG,JPEG,PNG}', GLOB_BRACE);
foreach ($imgs as $img) {
    echo "<img src='$img' alt='' />\n";
    }
?>
</div>

<script>
document.documentElement.className = 'js';
var slides = document.getElementById('slideshow').getElementsByTagName('img');
function slideShow(i){
	slides[i].className = '';
	if(i == slides.length -1){ slides[0].className = 'show'; i = -1; }
	if(i > -1 ){ slides[i+1].className = 'show'; }
    	setTimeout(function(){ slideShow(++i % slides.length) }, 15000);
	}
setTimeout(function(){ slides[0].className = 'show'; }, 1);
setTimeout(function(){ slideShow(0) }, 15000);
</script>

</body>
</html>