<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Rotar horizontalmente una imagen por la pantalla</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
#rotarImagen-wrapper {
position:relative;
height:100px;
background-color:#929cbf;
width:500px;
}
#rotarImagen-wrapper img {
position:absolute;
top:20px;
}
#img1 {
left:-133px;
}
#img2 {
display:none;
}
</style>
<script>
$(document).ready(function(){
imagen="http://www.lawebdelprogramador.com/img/logo-lwp.png";
$('#img1').attr("src", imagen).load(function(){
// Obtenemos la anchura de la imagen
imgWidth=$("#img1").width();
// Definimos la posición inicial como la anchura de la imagen en
// negativo
posicion=-imgWidth;
// Obtenemos la anchura del div donde se mostrara la imagen en
// movimiento
backgroundWidth=$("#rotarImagen-wrapper").width();
// Ejecutamos esta función cada 50 milisegundos
setInterval(function()
{
// Aumentamos la posicion de la imagen 3 pixeles
posicion+=3;
// Movemos la imagen a su nueva posicion horizontal
$("#img1").css("left",posicion);
// Si la parte derecha de la imagen sobrepasa la anchura
// maxima que tiene definida...
if(posicion+imgWidth>backgroundWidth)
{
// Mostramos la segunda imagen, y la posicionamos en el
// lado derecho simulando la rotación de la imagen
$("#img2").show().css("left",posicion-backgroundWidth);
// Una vez la imagen inicial ha sobrepasado por completo
// la anchura maxima definida...
if(posicion>backgroundWidth+imgWidth)
{
// Ponemos la posicion de la imagen en el lugar
// de la segunda imagen para volver a empezar el
// ciclo
posicion=posicion-backgroundWidth;
$("#img1").css("left",posicion);
// Escondemos la segunda imagen que no volvera a
// aparecer hasta que la primera imagen se vuelva a
// pasar de los limites
$("#img2").hide();
}
}
}, 50);
});
});
</script>
</head>
<body>
<h1>Rotar horizontalmente una imagen por la pantalla</h1>
<div id="rotarImagen-wrapper">
<img src="" id="img1">
<img src="http://www.lawebdelprogramador.com/img/logo-lwp.png" id="img2">
</div>
</body>
</html>