Hola:
Creo que el parpadeo se debe a la reasignación de imágenes... estuve haciendo algunas pruebas y conseguí que no parpadee, pero el efecto es otro (tal vez te guste)
Código:
<html>
<head>
<title>
efecto
</title>
<script type="text/javascript">
var imagenes =
["http://www.pepemolina.com/galeria/fotos/mini/Diapositiva81.jpg",
"http://www.pepemolina.com/galeria/fotos/mini/Diapositiva82.jpg",
"http://www.pepemolina.com/galeria/fotos/mini/Diapositiva100.jpg"];
var actual = 1;
var incre = "img2";
var decre = "img1";
var tam1 = 100;
var tam2 = 0;
function transitar() {
if (tam1 > 0) {
tam1--; tam2++;
document.images[decre].style.width = tam1 + "%";
document.images[decre].style.left = (100 - tam1) + "%";
document.images[incre].style.width = tam2 + "%";
document.images[incre].style.left = (100 - tam2) + "%";
setTimeout("transitar()", 10);
}
else {
tam1 = 100; tam2 = 0;
document.images[decre].src = imagenes[++actual % imagenes.length];
document.images[decre].style.left = "0px";
tmp = incre; incre = decre; decre = tmp;
setTimeout("transitar()", 1000);
}
}
</script>
</head>
<body onload="transitar()">
<div id="efecto" style="width: 133px; height: 100px; position:relative">
<img src="http://www.pepemolina.com/galeria/fotos/mini/Diapositiva81.jpg"
style="width: 100%; height: 100%; position: absolute; top: 0; left: 0%"
name="img1" />
<img src="http://www.pepemolina.com/galeria/fotos/mini/Diapositiva82.jpg"
style="width: 0%; height: 100%; position: abolute; top: 0; left: 0%" name="img2" />
</div>
</body>
</html>
Puedes verlo insertando el código en esta página:
Probador de scripts
Saludos
