ayuda con aplicacion de imgs aleatorias con javascript
Publicado por santiago (106 intervenciones) el 13/04/2012 13:05:19
Hola a todos veran tengo un codigo que hace a la perfeccion la funcion de imagen aleatoria cogiendolas de una carpeta llamada "fotos", hasta ahí todo bien, el problema es que quiero que aparezcan mas de una imagen aleatoria, una al lado de la otra, cambiando aleatoriamente cada una a una frecuencia de tiempo diferente cada una. Vamos como lo hacia twitter en su portada antes de que la cambiaran, aqui pongo el codigo completo, gracias de ante mano tanto si me pueden ayudar como sino.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
/* BANNER CAMBIANTE
----------------------------------------------- */
{margin: 0; padding: 0;}
#rotator {
/*border: 1px solid #000000;*/
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 80px;
height: 80px;
}
#rotator img {
border: 0;
width: 80px;
height: 80px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000); }
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return; }
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>
</head>
<body>
<div id="rotator">
<a href="http://wwww.yonkis.com" target="_blank"><img alt="Título" src="fotos/1.jpg"/></a>
<a href="http://www.meneame.com" target="_blank"><img alt="Título" src="fotos/2.jpg"/></a>
<a href="http://www.elrellano.com" target="_blank"><img alt="Título" src="fotos/3.jpg"/></a>
<a href="http://www.apple.com" target="_blank"><img alt="Título" src="fotos/4.jpg"/></a>
<a href="http://www.cineactual.net" target="_blank"><img alt="Título" src="fotos/5.jpg"/></a>
<a href="http://www.google.com" target="_blank"><img alt="Título" src="fotos/6.jpg"/></a>
<a href="http://www.lawebdelprogramador.com/" target="_blank"><img alt="Título" src="fotos/7.jpg"/></a>
<a href="http://thepiratebay.se/" target="_blank"><img alt="Título" src="fotos/8.jpg"/></a>
<a href="http://www.vagos.es" target="_blank"><img alt="Título" src="fotos/9.jpg"/></a>
<a href="http://www.lavozdegalicia.es/noticia/economia/2012/04/12/granjas-cobran-leche-entro-euro/0003_201204G12P31994.htm" target="_blank"><img alt="Título" src="fotos/10.jpg"/></a>
<a href="http://noticias.lainformacion.com/deporte/juegos-olimpicos-de-verano/que-tiemble-londres-mortadelo-y-filemon-iran-a-los-juegos-olimpicos-de-2012_eyzoCTeJuBMbSmrLNkMxj6/" target="_blank"><img alt="Título" src="fotos/11.jpg" /></a>
<a href="http://www.telegraph.co.uk/news/worldnews/europe/germany/9200054/German-civil-servant-says-he-did-nothing-for-14-years.html" target="_blank"><img alt="Título" src="fotos/12.jpg" /></a>
<a href="http://alt1040.com/2012/04/el-g8-se-prepara-para-el-colapso-de-acta" target="_blank"><img alt="Título" src="fotos/13.jpg"/></a>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
/* BANNER CAMBIANTE
----------------------------------------------- */
{margin: 0; padding: 0;}
#rotator {
/*border: 1px solid #000000;*/
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 80px;
height: 80px;
}
#rotator img {
border: 0;
width: 80px;
height: 80px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000); }
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return; }
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>
</head>
<body>
<div id="rotator">
<a href="http://wwww.yonkis.com" target="_blank"><img alt="Título" src="fotos/1.jpg"/></a>
<a href="http://www.meneame.com" target="_blank"><img alt="Título" src="fotos/2.jpg"/></a>
<a href="http://www.elrellano.com" target="_blank"><img alt="Título" src="fotos/3.jpg"/></a>
<a href="http://www.apple.com" target="_blank"><img alt="Título" src="fotos/4.jpg"/></a>
<a href="http://www.cineactual.net" target="_blank"><img alt="Título" src="fotos/5.jpg"/></a>
<a href="http://www.google.com" target="_blank"><img alt="Título" src="fotos/6.jpg"/></a>
<a href="http://www.lawebdelprogramador.com/" target="_blank"><img alt="Título" src="fotos/7.jpg"/></a>
<a href="http://thepiratebay.se/" target="_blank"><img alt="Título" src="fotos/8.jpg"/></a>
<a href="http://www.vagos.es" target="_blank"><img alt="Título" src="fotos/9.jpg"/></a>
<a href="http://www.lavozdegalicia.es/noticia/economia/2012/04/12/granjas-cobran-leche-entro-euro/0003_201204G12P31994.htm" target="_blank"><img alt="Título" src="fotos/10.jpg"/></a>
<a href="http://noticias.lainformacion.com/deporte/juegos-olimpicos-de-verano/que-tiemble-londres-mortadelo-y-filemon-iran-a-los-juegos-olimpicos-de-2012_eyzoCTeJuBMbSmrLNkMxj6/" target="_blank"><img alt="Título" src="fotos/11.jpg" /></a>
<a href="http://www.telegraph.co.uk/news/worldnews/europe/germany/9200054/German-civil-servant-says-he-did-nothing-for-14-years.html" target="_blank"><img alt="Título" src="fotos/12.jpg" /></a>
<a href="http://alt1040.com/2012/04/el-g8-se-prepara-para-el-colapso-de-acta" target="_blank"><img alt="Título" src="fotos/13.jpg"/></a>
</div>
</body>
</html>
Valora esta pregunta
0