Twily's Slideshow

<!DOCTYPE html>
<html>
<head>
<title>Twily's Slideshow</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<style type="text/css">
html,body { margin: 0; padding: 0; background: #000; }

.slideshow {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; z-index: 1;
    background: #000 no-repeat center center fixed; background-size: cover;     /* cover || contain */
    opacity: 0; transition: opacity 3s ease;                                    /* Image crossfade time */
}
</style>
<script type="text/javascript">
var $=function(id) { return document.getElementById(id); };

// Command to generate imagelist (GNU/Linux) [Requires find, sed and vim]
// $ function list() { echo "var filepath=\"file://"$(pwd)"/\";" && find "$1" -maxdepth 1 -type f -regex ".*\.\(jpg\|jpeg\|png\)" -exec echo "    "\"{}\", \; | sed "s/%/%25/g" | sed "s/\.\///g" | vim -; }; list .
//
// If filenames (or the path) contain '%' they will need to be replaced by '%25' (Eg.: ..%25.. to ..%2525..)
// (The command above does this automatically using sed)
var imagelist=[
    "wallhaven-110491.jpg",
    "wallhaven-123187.jpg",
    "wallhaven-134400.jpg",
    "wallhaven-137115.jpg",
    "wallhaven-149753.jpg",
    "wallhaven-20260.jpg",
    "wallhaven-26620.jpg",
    "wallhaven-31652.jpg",
    "wallhaven-50083.jpg",
    "wallhaven-51234.jpg",
    "wallhaven-54308.jpg",
    "wallhaven-6463.jpg",
    "wallhaven-65157.jpg",
    "wallhaven-6688.jpg",
    "wallhaven-69760.jpg",
    "wallhaven-72147.jpg",
    "wallhaven-82896.jpg",
    "wallhaven-8489.jpg",
    "wallhaven-86566.jpg",
];

var wTimer=5;                                                                   // Seconds before next image
var wOpacity=100;                                                               // 0 (Transparent) - 100 (Opaque)
var filepath="file:///home/guest/Pictures/Wallpapers/wallhaven/";               // Path to find images (filepath+imagelist[x])

function init() {
    nextImage();                                                                // Show first image
    if(imagelist.length>1) setInterval("nextImage();",wTimer*1000);             // Run the slideshow
}

var wshow="img1",whide="img2",newimg,curimg;
function nextImage() {
    curimg=newimg;
    while(newimg==curimg) newimg=Math.floor(Math.random()*imagelist.length);    // Generate next random image
    (new Image()).src=filepath+imagelist[newimg];                               // Preload next image

    whide=[wshow,wshow=whide][0];                                               // Swap values
    $(wshow).style.backgroundImage="url('"+filepath+imagelist[curimg]+"')";     // Show current image
    $(wshow).style.opacity=wOpacity/100;
    $(whide).style.opacity=0;

    if(curimg==null) nextImage();                                               // Buffer one image ahead
}
</script>
</head>
<body onload="init();">

<div id="img1" class="slideshow"></div>
<div id="img2" class="slideshow"></div>

</body>
</html>