div de 700 x 600 con imagen cambiante

TheScript · #1 (**permalink**) 18/09/2012, 04:18

Hola a todos, estoy buscando como poner imagenes aleatorias al background de un div. El caso es que solo encuentro para poner el background al body y si lo ajusto a mi div no me funciona. Solo necesito que me muestre la foto y luego haga un fade y salga otra y asi con 6 fotos... que vayan rotando.

Alguien tiene algún script o sabe de algun ejemplo que sea muy sencillo???

IsaBelM · #2 (**permalink**) 18/09/2012, 04:52

prueba y trabaja con este. no está muy desarrollado pero se adecua a lo que buscas

Cita:

<!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">
#contenedor {
background: red;
width: 562px;
height: 320px;
border: 1px solid red;
}

#contenedor > div {
display: inline-block;
}

#botonera {
background: pink;
width: 40px;
height: 320px;
vertical-align: top;
}

#botonera p, #botonera p[class="inicio"] {
text-align: center;
margin: 5px 2px;
border: 1px solid yellow;
}

#botonera p {
background: orange;
cursor: pointer;
}

#botonera p[class="inicio"] {
background: red;
}

#contenedor2 {
width: 500px;
height: 320px;
}

#visor {
position: absolute;
background: #111;
z-index: -1;
width: 518px;
height: 320px;
}
</style>

<script type="text/javascript">
var url_vector = new Array();
var banner_vector = new Array();
var img_vector = new Array();

img_vector[0] = "css/img1.png";
img_vector[1] = "css/img2.png";
img_vector[2] = "css/img3.png";
img_vector[3] = "css/img4.png";

url_vector[0] = "http://www.url1.com";
url_vector[1] = "http://www.url2.com";
url_vector[2] = "http://www.url3.com";
url_vector[3] = "http://www.url4.com";

if(document.images){
for(var i = 0; i < img_vector.length; i++) {
banner_vector[i]=new Image();
banner_vector[i].src = img_vector[i];
}
}

var counter = 1;

function inicio() {
document.getElementById('visor').style.zIndex = -1;
temporizadorFadeIn = setInterval(fadeIn, 25);
}

var temporizadorFadeIn;
var temporizadorFadeOut;
var transparencia = 0;
var opacTotal = 70;
var temporizadorRotador;

function fadeIn() {
transparencia += 1;
transparencia = parseInt(transparencia);
var opacidad = transparencia /100;

//si terminó la transición se oculta la capa y se limpia el temporizadorFadeIn
if(document.getElementById('visor').style.zIndex == -1) {document.getElementById('visor').style.zIndex = 999;}

transparencia = (transparencia == opacTotal) ? opacTotal : transparencia;

if(transparencia == opacTotal) {

clearInterval(temporizadorFadeIn);
temporizadorFadeOut = setInterval(fadeOut, 25);
document.getElementById('img').src = banner_vector[counter % banner_vector.length].src;

document.getElementById("contenedor").getElementsB yTagName('a')[0].href = url_vector[counter % url_vector.length]

document.getElementById("botonera").getElementsByT agName('p')[counter % banner_vector.length].style.background="red";
if (counter >= 1) {
counter--;
document.getElementById("botonera").getElementsByT agName('p')[counter % banner_vector.length].style.background="orange";
counter++;
}
counter++;

}

var obj = document.getElementById('visor');

if (document.all){
obj.style.filter = 'alpha(opacity='+transparencia+')';
}else{
obj.style.MozOpacity = opacidad;
obj.style.opacity = opacidad;
obj.style.KHTMLOpacity = opacidad;
}
}

function fadeOut() {
transparencia -= 1;
transparencia = parseInt(transparencia);
var opacidad = transparencia /100;

//si terminó la transición se oculta la capa y se limpia el temporizadorFade
transparencia = (transparencia == 0) ? 0 : transparencia;
if(transparencia == 0) {document.getElementById('visor').style.zIndex = -1; clearInterval(temporizadorFadeOut); }

var obj = document.getElementById('visor');

if (document.all){
obj.style.filter = 'alpha(opacity='+transparencia+')';
}else{
obj.style.MozOpacity = opacidad;
obj.style.opacity = opacidad;
obj.style.KHTMLOpacity = opacidad;
}
}

window.addEventListener('load', function() {
document.getElementById("contenedor").getElementsB yTagName('a')[0].href = url_vector[0];
document.getElementById("contenedor").getElementsB yTagName('img')[0].src = img_vector[0];
temporizadorRotador = setInterval(inicio, 5000);

var but = document.getElementById('botonera').getElementsByT agName('p');
for (var i = 0; i < but.length; i++) {
but[i].addEventListener('click', function() {

var elem_click = this.id.split('_')[1];
if (parseInt((elem_click*1)+1) == parseInt(counter % url_vector.length)) {return;}
//alert(parseInt((elem_click*1)+1) + ' - ' + parseInt(counter % url_vector.length));
clearInterval(temporizadorFadeIn);
clearInterval(temporizadorFadeOut);
clearInterval(temporizadorRotador);
counter = elem_click;
inicio();
temporizadorRotador = setInterval(inicio, 5000);}, false);

}

}
, false);
</script>
</head>
<body>

<div id="contenedor">
<div id="botonera"><p class="inicio" id="ban_0">bot1</p><p id="ban_1">bot2</p><p id="ban_2">bot3</p><p id="ban_3">bot4</p></div>
<div id="contenedor2">

<div id="visor"></div>
<a href=""><img src="" alt="" id="img" /></a>

</div>
</div>

</body>
</html>

TheScript · #3 (**permalink**) 18/09/2012, 05:48

Muchas gracias IsaBelM, vamos a ello! Muchas gracias