banner simples HTML5

by Felype Rennan

HTML

<div id="banner1" class="banner tam120x600"><div class="preload"></div></div>

CSS

body {
    font: "Lucida Sans", sans-serif;
}

.banner {
    background: black;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.banner > .preload.show {
    transform: scale(1);
    opacity: 1;
    transition: 0.4s ease-out;
}
.banner > .preload {
    content: " ";
    position: absolute;
    transition: 0 ease-out;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.1);
}

.banner.tam120x600 {    
    width: 120px;
    height: 600px;
}

JavaScript

var banner1 = {
    // --- Configuração
    tagId: "#banner1",
    tempo: 5000, // em milisegundos
    imagens: [
        'http://img02.deviantart.net/18e9/i/2012/232/0/a/welcome_to_the_internet__please_follow_me_by_sharpwriter-d5buwfu.jpg',
        'http://i.stack.imgur.com/FEihD.jpg',
        'http://www.whdwallpapers.com/wp-content/uploads/2014/03/bear-riding-abraham-lincoln-with-laser-eyes-14976-1920x1080.jpg',
        'http://i.imgur.com/D4ihM.jpg'
    ],
    
    // --- Funcionamento
    indice: 0,
    iniciar: function() {
        var bannerObj = this;
        $(bannerObj.tagId).css('background-image', "url('" + bannerObj.imagens[0] + "')");
        $(bannerObj.tagId + " > .preload").css('background-image', "url('" + bannerObj.imagens[(bannerObj.indice+1) %  bannerObj.imagens.length] + "')");   
        this.timer = setInterval(function() {
            $(bannerObj.tagId + " > .preload").addClass("show");
            setTimeout(function() {
                $(bannerObj.tagId).css('background-image', "url('" + bannerObj.imagens[++bannerObj.indice % bannerObj.imagens.length] + "')");
                $(bannerObj.tagId + " > .preload").css('background-image', "url('" + bannerObj.imagens[(bannerObj.indice+1) %  bannerObj.imagens.length] + "')");   
                $(bannerObj.tagId + " > .preload").removeClass("show");
            },400);
        }, bannerObj.tempo);
    }
};
// -- Coisar a coisa.
banner1.iniciar();