Imágenes cambiantes en página web
Estoy intentando crean una página web con imágenes cambiantes, tanto en la cabecera como en el fondo de la página, pero, de momento, no he tenido éxito.
No sé si es por el código que inserto en el head o el que falla es el del body, en fin, si me puedes ayudar.
2 respuestas
Me tendrás que dar más información para que te pueda ayudar. Si la página que estas intentando hacer estuviera en la red y pudiera visitarla sería mucho más sencillo. Si no es así explícame al menos como pretendías hacer que cambiaran las imágenes y el código correspondiente.
Hola!
Gracias por contestarme...
Estaba buscando un ejemplo, pero ahora mismo no doy con ninguna página, de todas formas he visto ese efecto muchas veces. Sé que con Flash se puede hacer, pero ya no quiero utilizar este programa, me imagino que con Javascript se podrá hacer igual-
Sería simplemente una cabecera ocupada por una imagen grande que fuera cambiando en segundos, una imagen daría pasa a otra y a otra sin que el usuario hiciese nada.
Si sabes cómo podría hacerlo, pues estupendo, sino no pasa nada.
Un saludo!
Mónica:
Te puedo dar una solución para hacer lo que quieres aunque tendré que suponer que tienes algunos conocimientos básicos de HTML, css y javascript. Para empezar tienes que poner el número de div's o img's diferentes que quieras con su background o src correspondiente. A todos ellos asígnales una misma clase y una id que sea una palabra igual para todos y luego números correlativos a partir del cero. Pon en esa clase común la propiedad "display: none" y crea también la clase ".nombreClaseComun.active" con la propiedad "display: block". Esta clase active tienes que asignársela para empezar a la primera de las imágenes a parte de la clase común ya mencionada. Ahora ya tienes todas las imágenes ahí y solo se debería ver la primera. Para hacer que se cambien las imágenes ahora faltaría el javascript y para más comodidad he decidido usar la librería javascript jQuery. Puedes bajarlo o informarte en http://www.jquery.com/
Aquí abajo te pongo el código completo con un ejemplo. Si lo copias todo, lo pegas en un archivo de texto, lo guardas como html y lo abres con un navegador ya te debería funcionar. Creo que mirando el código será más fácil que lo entiendas que con la explicación:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var intervalID = setInterval(function(){
var num = 0;
$(".nombreClaseComun").each(function(){
if( $(this).hasClass("active") )
{
num = Number(this.id.replace("nombreId",""));
num = num + 1;
}
});
$(".nombreClaseComun").removeClass( "active" );
if( $("#nombreId" + num).length == 0 )
{
num = 0;
}
$("#nombreId" + num).addClass( "active" );
}, 5000);/*el tiempo entre cambio y cambio en milisegundos*/
});
</script>
<style>
.nombreClaseComun.active{
display:block;
}
.nombreClaseComun{
display:none;
}
</style>
</head>
<body>
<img id="nombreId0" class="nombreClaseComun active" src="http://mediablog.cadenadial.com/atrevete/files/2012/11/ordenador-olimpico-de-lenovo.jpg" />
<img id="nombreId1" class="nombreClaseComun" src="
" />
<img id="nombreId2" class="nombreClaseComun" src="
" />
<img id="nombreId3" class="nombreClaseComun" src="
" />
</body>
Perfecto! Qué bien, pensé que no me salía y era sólo por una clase a la que no le había puesto el punto -suele pasar-.
Muchas gracias por tu ayuda, de verdad.
Feliz año!
¿Cómo estas?, cuando decís: "imágenes cambiantes" ¿cambian solas o cuando pones el mouse encima de la imagen? Te pregunto esto para saber que necesitas. O si tenes algún sitio de ejemplo enviame el link así veo que es lo que quieres hacer.
Hola!
Sí, sería que cambiasen solas. He visto esto en muchas páginas, ahora no me acuerdo de ninguna....
Gracias por contestar tan rápido
Creo que lo que buscas se llama "slider", es un plugin de jquery, acá te dejo un link donde hay varios demos y la opción de bajarlos para instalarlos en tu pagina, si no entiendes como usarlos me avisas y lo vemos, saludos.