Simple Images Cycler

by Salustiano Silva

HTML

<div id="nov-ger">
<a href="http://localhost/#/" style="display: inline; z-index: 1;">
    <img src="http://placehold.it/253x163/333/FFF/&text=Zuul+1" class="active" />
</a>

<a href="http://localhost/#/" style="display: inline; z-index: 1;">
    <img src="http://placehold.it/253x163/333/FFF/&text=Zuul+2" />
</a>

<a href="http://localhost/#/" style="display: inline; z-index: 1;">
    <img src="http://placehold.it/253x163/333/FFF/&text=Zuul+3" />
</a>

<a href="http://localhost/#/" style="display: inline; z-index: 1;">
    <img src="http://placehold.it/253x163/333/FFF/&text=Zuul+4" />
</a>

</div>

CSS

#nov-ger {
    position:relative;
}
#nov-ger img {
    z-index:1;
    width: 253px!important;
    height: 163px!important;
    position:absolute;
    right: 1px;
}
#nov-ger img.active {
    z-index:3
}

JavaScript

function cycleImages() {

    var $active = $('#nov-ger .active');

    if ($active.parent().next().find('img').length > 0) var $next = $active.parent().next().find('img');
    else var $next = $('#nov-ger img:first');

    $next.css('z-index', 2); //move the next image up the pile

    $active.fadeOut(1500, function () { //fade out the top image
        $active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
        $next.css('z-index', 3).addClass('active'); //make the next image the top one
    });
}

$(document).ready(function () {
    setInterval(cycleImages, 4000);
});