Entrar

Cambio de imagenes de mi body con jquery

saul123 · · Solicitar retirada
Hola

Aqui les dejo un ejemplo de como hacer que el fondo de su body cambie .
<body >
<div id="contenedor">
<img src="imagen/1.jpg" alt="" />
</div>
<div id="contenido"></div>
<div id="contenido-1">
<h1>Ejemplo de fondo con slider</h1>
</div>
  
</div>

Nuestro css
html{
	height:100%;
	width:100%;
	overflow: hidden;
}
#contenido {
	position:absolute;
	height:150px;
	width:100%;
	background:#e3f9fa;
	text-align:center;
	margin-top:80px;
	filter: alpha(opacity=80); opacity: .8
}
#contenido-1 {
	position:absolute;
	width:100%;
}
#contenido-1 h1 {
	width:100%;
	height:100%;
	margin-top:130px;
	margin-left:30%;
	float:left;
	font-size:36px;
	font-family:Verdana, Geneva, sans-serif;
	color: #0088fb;
}
#contenedor img {
	position:absolute; width:100%; height:100%;
}
#foto{
	float:left;
	margin-top:500px;
	margin-left:35%;
	margin-right:50%;
	width:100%;
}


Nuestrra funcion con jquery
var contador=1;
$(document).ready(
function()
{
	CambiarImg();
}
);
$("#contenedor").css({
			"background-image" : "url(images/" + photoObject.image + ")",
			"display" : "block",
			"z-index" : currentZindex
		});
function CambiarImg()
{
	if(contador!=4)
	{
		var valor="imagen/"+contador+".jpg"
		var src_img_div='url(\''+valor+'\')';
		$("#contenedor").css('backound-image',src_img_div);
		$("#contenedor img").fadeOut("slow",function(){
			$("#contenedor img").attr("src",valor);
													 });
		$("#contenedor img").fadeIn("slow");
		$("#contenedor img").css ('display','block');
		setTimeout ("CambiarImg()",4000);
		contador++;
	}
	else
	{
		contador=1;
		setTimeout('CambiarImg()',1000);
	}
}


También necesitamos agregar nuestro jquery-mins y no olvidemos las demás imágenes que estarán en nuestra carpeta imagen .

Aqui puedes ver el funcionamiento ejemplo
skaparate · · Solicitar retirada
Excelente, gracias. ¿Lo hiciste tú sin utilizar un plugin? ¡Felicitaciones! :D. Ahora podrías hacerlo plugin.

Saludos.
loroneta · · Solicitar retirada
Buenas Saul,

Hace tiempo que busco como hacer justo esa funcion que tu pones, el problema es que yo solo se un poco de html, que he aprendido gracias a Jorgens y a todos vosotros.[;)]
No tengo ni idea de jquery pero esto me vendria muy, muy, muy bien.
Si no es demasiado pedir podrias explicarme un poco mas detalladamente donde va cada cosa, como tengo que llamar a las imagenes y como puedo poner mas.
Muchisimas gracias.
loroneta · · Solicitar retirada
Porfa si alguien sabe como hacerlo le agradecería que me ayudara.
Muchas Gracias.
loroneta · · Solicitar retirada
No hay manera, las imagenes ya lo tengo claro 1.jpg, 2.jpg, 3.jpg,.....
Mirando el codigo del ejemplo he creado mi ejemplo de pagina pero me sale un error

supongo que es por que me falta guardar el archivo jquery-mins, si es esto es que no se ni de donde sacarlo, ni si es generico o hay que tocar el codigo,... o si son mas de un archivo,...
Ayuda porfa.
tinchin26 · · Solicitar retirada
Como estas? recien veo tu post y no se si solucionaste tu problema... Pero en caso de que no lo hayas solucionado aun: el "jquery mins" es el archivo de extension js que debes descargar (es gratis, te paso el link http://jquery.com/ ) e incluir en el head de tu pagina web. "Mins" significa q es la version simplificada del archivo jquery, la version de para produccion q esta comprimida. Tambien se encuentra la version de desarrollador en la que podras leer todo el codigo mejor. Luego, entre etiquetas script (<script type="text/javascript"> </script>) pones el js que saul puso en el post. Finalmente, incluyes los estilos. Deberia quedarte de esta forma:

<!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&iacute;tulo</title>
<script type="text/javascript" src="jquery-1.7.1.js"
<script type="text/javascript">
var contador=1;
$(document).ready(
function()
{
CambiarImg();
}
);
$("#contenedor").css({
"background-image" : "url(images/" + photoObject.image + ")",
"display" : "block",
"z-index" : currentZindex
});
function CambiarImg()
{
if(contador!=4)
{
var valor="imagen/"+contador+".jpg"
var src_img_div='url(\''+valor+'\')';
$("#contenedor").css('backound-image',src_img_div);
$("#contenedor img").fadeOut("slow",function(){
$("#contenedor img").attr("src",valor);
});
$("#contenedor img").fadeIn("slow");
$("#contenedor img").css ('display','block');
setTimeout ("CambiarImg()",4000);
contador++;
}
else
{
contador=1;
setTimeout('CambiarImg()',1000);
}
}
</script>
<style type="text/css">
html{
height:100%;
width:100%;
overflow: hidden;
}
#contenido {
position:absolute;
height:150px;
width:100%;
background:#e3f9fa;
text-align:center;
margin-top:80px;
filter: alpha(opacity=80); opacity: .8
}
#contenido-1 {
position:absolute;
width:100%;
}
#contenido-1 h1 {
width:100%;
height:100%;
margin-top:130px;
margin-left:30%;
float:left;
font-size:36px;
font-family:Verdana, Geneva, sans-serif;
color: #0088fb;
}
#contenedor img {
position:absolute; width:100%; height:100%;
}
#foto{
float:left;
margin-top:500px;
margin-left:35%;
margin-right:50%;
width:100%;
}
Nuestrra funcion con jquery


Código:
var contador=1;
$(document).ready(

</style>

</head>

<body >
<div id="contenedor">
<img src="imagen/1.jpg" alt="" />
</div>
<div id="contenido"></div>
<div id="contenido-1">
<h1>Ejemplo de fondo con slider</h1>
</div>
</div>
</html>



Espero te sirva!!!