como hacer desvanecimientos entre imagenes

Hola mi duda es sobre como hacer desvanecimientos entre imagenes, claro de la manera mas adecuada eso que se conoce como slide shot o algo asi... mi problema es que no soy mucho del tipo de copiar y pegar codigos me gusta hacer las cosas y saber como las hago.. tengo este codigo que, lamentablemente tuve que copiar de una pagina llamada oca restaurante y funciona bien por si a alguien le sirve es este. ¡a y si alguien sabe como funciona me lo podria explicar de favor!:

Código Javascript :

 <style>

#slideshow {
    position:relative;
    height:400px;
   width:607px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

</style>

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 4000 );
});

</script>

Esto va en el header. y para usarlo dentro del body solo se coloca lo siguiente:

Código Javascript :

<div id="slideshow">
                <img src="" alt="<?php bloginfo();?>/paginas/images/h1.png" class="active"/>
                <img src="<?php echo bloginfo();?>/paginas/images/h2.png" alt="" />
                .....<!-- Con todas las imagenes que deseen -->
            </div>

Pero este script no me sirve para controlar eventos del raton ya que solo funciona secuencialmente.
Como podria hacer para aplicar slide shot a un grupo de 5 imagenes y por ejemplo al darle clic en un boton, se pause el desvanecimento de imagenes, al darle clic a otro retroceder o avanzar a la siguiente imagen y cosas asi..
Ayuda de favor.

Te faltó especificar que el código que has posteado necesita de JQuery.

El efecto de desvanecimiento o fundido de imágenes se logra cambiando la opacidad del elemento HTML (<img> en este caso) cambiando de valores la propiedad CSS "opacity: XX;" en todos los navegadores menos IE8 y anteriores, donde XX es un número decimal del 0 (transparente) al 1 (totalmente opaco), o sea que:

Código :

opacity: 0.5;

dará una opacidad mediana.

Para IE8 y anteriores es filter:alpha(opacity=XX) donde XX es un número del 0 al 100.

Cierto tienes razon lo olvide... Gracias por ampliar la informacion, de casualidad sabras como hacer un slide similar pero con las caracteristicas que mencione hace un momento?? eso de que se detenga cuando pases el raton por algun otro div y esas cosas

¿Por qué no mejor estudias JQuery?, encontrarás que te facilita la vida .
JQuery se inventó para que JavaScript parezca que apesta menos...

ok ok , gracias creo.