Cambio de imagenes de mi body con jquery

**saul123** · 21/04/2011, 14:32

Hola

Aqui les dejo un ejemplo de como hacer que el fondo de su body cambie .

Código HTML:

<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

Código:

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(
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** · 05/05/2011, 18:01

Excelente, gracias. ¿Lo hiciste tú sin utilizar un plugin? ¡Felicitaciones! :D. Ahora podrías hacerlo plugin.

Saludos.

**loroneta** · 21/10/2011, 10:25

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** · 21/10/2011, 20:00

Porfa si alguien sabe como hacerlo le agradecería que me ayudara.
Muchas Gracias.

**loroneta** · 22/10/2011, 16:35

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
cctw.jpg
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** · 12/12/2011, 20:18

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í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!!!

Tema: Cambio de imagenes de mi body con jquery

Herramientas

Buscar Tema

Visualizar

Cambio de imagenes de mi body con jquery

Hola loroneta

Marcadores

Marcadores

Permisos de Publicación