<div id="slider">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
</div>

#slider {
width:618px; 
height:246px;
position:relative;
z-index:1500;
/* Important pour que tout ce qui dépasse soit caché ! */
overflow:hidden; 
}
/* On cache toute les images du bloc */
#slider  img{
display:none;
}

/* Cette classe est importante pour cette transition ! */
.slice {
display:block;
position:absolute;
height:246px;
}

<script type="text/javascript">
// On compte le nombre d'images dans le bloc #slider
var nombre = $("#slider img").length;
// On charge tout de suite la première image qui n'a pas besoin de transition
var firstimg = $("#slider").find('img:first');
$("#slider").css('background','url("'+ firstimg.attr('src') +'") no-repeat');

// On créé une variable qui nous servira à afficher la deuxième image, puis la troisième etc.
var  slice = 1;
// On crée une variable qui nous servira à incrémenter le z-index des images
var zindex = 60;

// On commence l'interval 
var anime_slider = setInterval( function(){

// Cette ligne nous dis grossomodo que si on a atteint la dernière image on repasse à la première
if(slice == nombre) { slice = 0;} 

/* On crée une variable newimg qui récupère la valeur de src de l'image
Vous remarquerez également le selecteur :eq("+slice+") qui nous sert à sélectionner 
la bonne image avec la var slice */
var newimg = $("#slider img:eq("+slice+")").attr('src');

// On crée un div avec un id unique 
$("#slider").append('
');

// On lui donne un background correspondant à l'image et surtout un width de 0px
$('#my_'+slice+'').css({'z-index': zindex, left:'0px',top:'0px', width: '0px',background: 'url("'+ newimg +'") no-repeat'});

// On démarre animate qui part de 0px vers 618px et on incrément slice de 1 pour la prochaine image
$('#my_'+slice+'').animate({ width:'618px'},1000,function (){ slice = slice+1;});

// On incrémente le z-index
zindex = zindex+1;
}, 3500);
</script>

<div id="slider">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
</div>

#slider {
width:618px; 
height:246px;
position:relative;
z-index:1500;
/* Important pour que tout ce qui dépasse soit caché ! */
overflow:hidden; 
}
/* On cache toute les images du bloc */
#slider  img{
display:none;
}

/* Cette classe est importante pour cette transition ! */
.slice {
display:block;
position:absolute;
height:246px;
}

<script type="text/javascript">
// On compte le nombre d'images
var nombre = $("#slider img").length;

// On spot la première image et on l'affiche en background
var firstimg = $("#slider").find('img:first');
$("#slider").css('background','url("'+ firstimg.attr('src') +'") no-repeat');

// slice pour savoir le numéro d'image à afficher, on l'incrémente en fin de script
var  slice = 1;
// idem pour zindex, on incrémente le z-index en fin de script pour assurer que l'image soit toujours par dessus
var zindex = 70;

// Variable qui nous sert pour créer nos multiples div, cette variable nous servira à donner un id unique à chaque div
var div = 1;

// Et c'est parti on lance l'interval
var anime_slider = setInterval( function(){

// si slice est égale à nombre c'est que la dernière image est passé on repasse donc à la première
if(slice == nombre) { slice = 0;} 

// On spot l'image avec :eq() et on prend son attribut src 
var newimg = $("#slider img:eq("+slice+")").attr('src');

// Variable pour définir le nombre de div qu'on veux pour l'effet, ici 5 blocs. 618 étant la longueur de la div principale
var largeur = 618/5;

// Durée de l'animation du premier bloc
duree = 400;

// On boucle pour la création des divs et l'attribution du background de chaque div et on anime
for(var i = 0; i < 5; i++){
$("#slider").append('
');
var fin = largeur*i+largeur;
if(i == 0){ var fin = 0;}else{ var fin = largeur*i;}
$('#my_'+div+'').css({'z-index': zindex, left: ''+largeur*i+'px',top:'0px', height: '0px', width: ''+largeur+'px',background: 'url("'+ newimg +'") no-repeat -'+fin+'px 0px  '});
$('#my_'+div+'').animate({ height:'246px'},duree);
// On incrémente la durée du prochain animate pour donner cet effet d'escalier
duree = duree+250;

// nouvel id pour le prochain div
div=div+1;
}
// Fin de boucle FOR

// On incrément slice pour choisir la prochaine image
slice = slice+1;
// On incrémente le z-index pour afficher toujours au dessus
zindex = zindex+1;
}, 4000);
</script>