Carrusel de imágenes en movimiento con javascript 2

Anteriormente he puesto un post con como crear un carrusel de imágenes usando una librería javascript en este caso os indico como crear vuestro propio carrusel de imágenes de modo que las  imágenes tengan movimeinto como podeís ver en el siguiente ejemplo.

El código para crear este carrusel de imágenes es el siguiente:

<!-- Cargamos la librería jquery que vamos a usar -->
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"/>

<script>

   // Función a ejecutar una vez cargado el documento
   $(document).ready(function() {
    try
    {

      // Lista de imágenes que queremos cargar
      var imagenes = new Array();
      imagenes[0] = 'carrusel01.png';
      imagenes[1] = 'carrusel02.png';
      imagenes[2] = 'carrusel03.png';

      var numero_imagenes = 3;
      var imagen_actual = 0;

      var width_image = 800;
      var height_image = 450;

      // Calculamos el máximo que podemos mover una imagen tanto 
      // verticalmente o horizontalmente
      var max_y = height_image - $('#carrusel').height();
      var max_x = width_image - $('#carrusel').width();

      $('#carrusel').css('backgroundPosition', '0 0');      // Velocidad del desplazamiento
      var scrollSpeed = 50;
     
      // Posición actual de la imagen
      var current_x = 0;
      var current_y = 0;


      // Iniciamos un temporizador que ejecutará la función que
      // realiza el movimiento cada cierto tiempo
      var timer = setInterval(function() {
        moveBackground()
      }, scrollSpeed);

      var estado = 1;

      // Función encargada de realizar el movimiento
      function moveBackground() {
      
        // Se definen estados que indican que movimiento realizar
        // en cada momento
        if (estado == 1) // nos desplazamos vertical y horizontalmente
        {
          if (current_x > (-1 * max_x))
          {
            current_x = current_x - 1;
          }
          current_y = current_y - 1;
          if (current_y == (-1 * max_y)) // Cambio de movimiento, hemos llegado al máximo
          {
            estado = 2;
          }
        }
        else if (estado == 2) // nos desplazamos horizontalmente
        {
          current_x = current_x - 1;
          if (current_x <= (-1 * max_x))
          {
            estado = 3;
          }
        }
        else if (estado == 3)
        {
         
          // Se va a proceder al cambio de imagen, antes
          // de nada se para el temporizador, para que no se 
          // ejecute mientras realizamos el cambio
          clearInterval(timer);
          current_x = 0;
          current_y = 0;
          estado = 1;                            
         
          // Se oculta el contenedor mientras se cambia la imagen
          // esto es simplemente para crear un efecto de difuminado
          // al cambiar la imagen, para ello usamos la función fadeOut 
          // de jquery
          $('#carrusel').fadeOut(2000, function() {
            <!-- Se selecciona la nueva imagen -->
            imagen_actual = imagen_actual + 1;
            if (imagen_actual == numero_imagenes)
            {
              imagen_actual = 0;
            }
            // Se sustituye la imagen
            $('#carrusel').css('background-image', "url('" + imagenes[imagen_actual] + "')")
              $('#carrusel').fadeIn(2000, function() {               
                 // Se reinicia el temporizador
                 timer = setInterval(function() {
                  moveBackground()
                }, scrollSpeed);
              }
            );
          });
        }

        // Se cambia la posición
        $('#carrusel').css("backgroundPosition", current_x + "px " + current_y + "px");
      }
    }
    catch (err)
    {
      alert(err);
    }
  });
</script>


<div id="carrusel" style="width:600px; height: 400px; background-image: url('carrusel01.png')">

Como puede verse la idea es bastante sencilla, se trata de usar las imágenes como fondo e ir desplazando la posición del mismo cada cierto tiempo.

En este caso he definido  sólo dos tipos de movimientos pero es posible definir todos los estados que uno desee y generar los movimientos en la dirección que se deseen.