Slides centralizados

by edgardleal

HTML

<div id="quadro"></div>

CSS

#quadro{
    width : 70%;
    height : 300px;
    border : solid 1px;
    margin-left : 15%;
}
.foto{
    position : absolute;
    border : solid 1px;
    display : none;
}

JavaScript

var fotos = $(".foto");
var index = 0;
function change(){
    $(".foto").slideUp();
    $("#" + index).show().position({my : "center", at : 'center' , of : '#quadro'}).hide().show('slide');
    index = index < 4 ? ++index : 0;
}


var cores = ['red', 'yellow', 'green', 'blue'];
for(var i = 0; i < 4; i++){
    var width = Math.round(Math.random()*190) + 100;
    var height = Math.round(Math.random()*190) + 100;
    var style = "background:" + cores[i] + ';width:' + width + 'px;height:' + 
         height + 'px';
    $('body').append('<div class="foto" id="' + i + '" style="' + style + '"></div>');   
}

setInterval(change, 1000);