Foros del Web - Ver Mensaje Individual

Naahuel · #5 (**permalink**) 28/02/2012, 14:12

Y estimo que podrías usar algo así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script>
function rotar_imagen(){
* var tiempo = 1000;//tiempo en milisegundos
    var arrImagenesMiniatura = [
        'http://3.bp.blogspot.com/_bVS2bdfO4As/RkvjtoibTxI/AAAAAAAAAso/c1Y93BkfBrs/s320/01_HomerSimpson.gif',
        'http://www.seeklogo.com/images/H/Homer_Butt_Homero_Trasero-logo-807B1B6A2E-seeklogo.com.gif', 
        'http://2.bp.blogspot.com/__UX7GOPM7wI/SeAOEWkWsWI/AAAAAAAAAWQ/0xaOwEIue_I/s200/Homer_Simpson.png'
    ];
    var arrImagenesGrandes = [
        'http://3.bp.blogspot.com/_bVS2bdfO4As/RkvjtoibTxI/AAAAAAAAAso/c1Y93BkfBrs/s320/01_HomerSimpson.gif',
        'http://www.seeklogo.com/images/H/Homer_Butt_Homero_Trasero-logo-807B1B6A2E-seeklogo.com.gif', 
        'http://2.bp.blogspot.com/__UX7GOPM7wI/SeAOEWkWsWI/AAAAAAAAAWQ/0xaOwEIue_I/s200/Homer_Simpson.png'
    ];
* 
* _a = document.getElementById('imagen-rotativo');
  _img = _a.appendChild(document.createElement("img"));
  
* 
* //cargar la 1er imagen
* _img.src = arrImagenesMiniatura[0];
* var i=1;
* setInterval(function(){
* * _img.src = arrImagenesMiniatura[i];
* * _a.href = arrImagenesGrandes[i]; //link a imagen mas grande
* * i = (i == arrImagenesMiniatura.length-1)? 0 : (i+1);
* }, tiempo);
}
</script>
</head>
<body onload="rotar_imagen();">
* <a id="imagen-rotativo" href="#"></a>
</body>
</html>

Ahora tenés dos arreglos, uno para las imagenes miniatura y el otro para las grandes. Se entiende que deben tener la misma cantidad de elementos y que el elemento 1 de las miniaturas corresponde al elemento 1 de las grandes y así.

Este código no me gusta nada. Usamos enmarcado en el html, es poco mantenible, los arreglos así separados son difíciles de cargar con un lenguaje en el servidor, etc.