JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<div class="fullscreen-outer">
    <div class="fullscreen-slide">
        <img src="//salemopus.com/perch/resources/upus-underground-0162-1-w1680h1050.jpg" style="width: 1920px; height: 1200px; left: 0px; right: auto; top: -385px; bottom: auto;">
    </div>
</div>
<div class="outside">
    <div class="content-outer">
        <div class="content-inner">
            <figure>
                <figcaption>
                    <div class="banner">
                        <ul>
                            <li>
                                <div class="navi"> <a href="music.php" class="ajax-link"><img src="//salemopus.com/perch/resources/nye.jpg" height="162" width="458" /></a>

                                </div>
                            </li>
                            <li>
                                <div class="navi"> <a href="music.php" class="ajax-link"><img src="//salemopus.com/perch/resources/karaoke-w458pxh162px.jpg" height="162" width="458" /></a>

                                </div>
                            </li>
                            <li>
                                <div class="navi"> <a href="music.php" class="ajax-link"><img src="http://jsfiddle.net/img/logo.png" height="162" width="458" /></a>

                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="infoi"> <a href="music.php" class="ajax-link"><img src="http://salemopus.com/underground/ripcurl.png" height="246" width="508"></a>

                    </div>
                </figcaption>
            </figure>
        </div>
    </div>
</div>

CSS

ol, ul {
    list-style: none;
}
.banner ul li {
    float: left;
    height: 162px;
    list-style: none;
    margin-left: 25px;
}
.fullscreen-outer, .fullscreen-stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
    overflow: visible;
}
.fullscreen-slide {
    z-index: -2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111;
}
.outside {
    height: auto;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.infoi {
    z-index: 10000000;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
ul li div.navi {
    margin-top: 4px;
    -webkit-mask-image: url(http://salemopus.com/underground/rippng.png);
    -o-mask-image: url(http://salemopus.com/underground/rippng.png);
    -moz-mask-image: url(http://salemopus.com/underground/rippng.png);
    mask-image: url(http://salemopus.com/underground/rippng.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.banner {
    position: fixed;
    overflow: hidden;
    width: 458px;
    height: 220px;
}
.banner img {
    position: absolute;
    top: 0;
    left: 0;
    height:162px;
}
figure {
    display: block;
    position:relative;
    z-index: 9000;
    top: 0;
    left: 0;
    background: #000;
}
figcaption {
    position: fixed;
    top: 20px;
    display: block;
    color: #fff;
    width: 100%;
    text-transform: uppercase;
    left: 0px;
}
.content-inner {
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding: 0;
    line-height: 150%;
    width: 100%;
}
.content-outer {
    margin: 0 auto;
    padding-bottom: 90px;
    display: block;
}

JavaScript

//hide all images except for first one
$('.banner ul img').hide().closest('ul').find('li:first-child img').show();
//hold 5 seconds before animation start (to show first image for some time)
setInterval(function () {
    changeImg(2000, 5000);
}, 5000);

/*
 * 
 * @param {Object} oImgList - jquery object for ul list holding LIs with images
 * @param {type} iFadeTime - cross fade time
 * @param {type} iDelay - delay for each image	     
 */
function changeImg(iFadeTime, iDelay) {
    oImgList = $('.banner');
    //if its the first time and prevImg is not defined yet, taking first one
    if (typeof prevImg == "undefined" || !prevImg) prevImg = oImgList.find('li:first-child').find('img');
    //taking next image as next in the list, take first if current one is the last
    nextImg = prevImg.closest('li').is(':last-child') ? oImgList.find('li:first-child').find('img') : prevImg.closest('li').next().find('img');
    //fade out previous img
    prevImg.stop(true, true).fadeOut(iFadeTime);
    //fade in next img
    nextImg.stop(true, true).fadeIn(iFadeTime);
    //reassing previous image to be next one
    prevImg = nextImg;
}