No devuelve opacidad

[jlx4]

Hola, tengo un div en el cual tengo imágenes que se van cambiando, a estas quiero hacerles un efecto de opacidad, un fadein y un fadeout, pero al probar el código sólo consigo realizar el cambio de opacidad una vez y no vuelve a cambiar despúes, alguien sabe como continuar el cambio? .

CSS:

Código:

<style> 
#banner{   
    opacity:.1;  
    -webkit-transition: opacity 2s ease-in-out;  
    -moz-transition: opacity 2s ease-in-out;  
    -o-transition: opacity 2s ease-in-out;  
    -ms-transition: opacity 2s ease-in-out;      
    transition: opacity 2s ease-in-out;  } 
</style>

PHP:

Código:

<div id="banner"></div>

JAVASCRIPT (Esta es la parte de la función javascript que pretendo que haga el cambio de opacidad):

Código:

Array..........................
función Cambiar imágenes
{............

var transicion = document.getElementById("banner");  
transicion.style.opacity="1";
}

Alguien sabe cómo continuar el cambio?