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')">
<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.
