Hacer que las imagenes cambien

McGregor · 20 Feb 2013, 15:24 · Solicitar retirada

Hola!! Me gustaría añadir a mi web un div situado en la parte superior en el que vayan saliendo imágenes cada cierto tiempo. No quiero que al actualizar la página cambie la imagen, eso no. Quiero que las imágenes vayan cambiando cada cierto tiempo. Por ejemplo, estas dos páginas hacen eso:

http://www.mercedes-benz.es/content/spain/mpc/mpc_spain_website/es/home_mpc/passengercars.flash.html?csref=_sem_google_adw_sitelinks:Home_2012
http://www.bulletformyvalentine.com/us/home

Me da igual si la persona que visite la página tenga la opción de cambiar las imágenes mediante un botón como en el último enlace que he puesto. Quiero también que lo que ponga se adapte a los navegadores más habituales: Firefox, IE, Google, Chrome...

La verdad es que he estado mirando en el foro y sí que he encontrado temas relacionados con esto, pero a mí no me funcionan las propuestas que dan.

Un saludo y gracias.

Lombardo · 20 Feb 2013, 16:08 · Solicitar retirada

Es un recurso muy común, busca slideshow en Google. Saludos.

McGregor · 20 Feb 2013, 20:09 · Solicitar retirada

Ok. Ya lo he conseguido hacer pero tengo una duda más, el IE me saca una ventanita en la que dice: Internet Explorer no permitió que esta página web ejecutara scripts o controles ActiveX en el equipo y me deja la opción de permitir contenido bloqueado. ¿Hay alguna manera de que no aparezca esta ventana? (he utilizado javascript para hacer el slideshow y no he subido la página al servidor aún, la veo en local)

Jenkins · 20 Feb 2013, 22:11 · Solicitar retirada

Puedes probar usando el nivoslider, te dejo este link con un tutorial y la descarga gratis nivo-slider-en-tu-pagina-web

otra forma es utilizando el siguiente codigo html:

<html>
<head>
<title>Editado por Jenkins</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">

<script language="javascript">
step=0;
function autoImgFlip() {
if (step < 4) {step++;}
else {step=0;}
if (step==0)
{a.src="objetos/foto1.jpg";}
if (step==1)
{a.src="objetos/foto2.jpg";}
setTimeout("autoImgFlip()", 1000);
if (step==2)
{a.src="objetos/foto3.jpg";}
}

</script>
</head>
<body onLoad="autoImgFlip();">
<div id="imagen">
<img src="objetos/foto1.jpg" id="a" width="250px" height="160px">
</div>

</body>
</html>

solamente de las copy y paste jeje tienes que modificar lo que deje en rojo solamente según tus necesidades.
espero te sirva de ayuda.

Cuentame como te fue con eso.

Yaneth · 21 Feb 2013, 00:30 · Solicitar retirada

hola
creo que esa alerta que te sale, es unicamente cuando lo miras en vista previa de local, una vez subes todo, y lo miras directo desde la red
ya no te sale (espero)

saludos

McGregor · 22 Feb 2013, 15:06 · Solicitar retirada

Ya he probado tu código Jenkins. Funcionar funciona, es decir, que pasa las imágenes y eso. Lo que pasa es que me gustaría que cada imagen que pasa tendría su propio enlace. ¿cómo se puede conseguir? Imagino que será una función de javascript pero no sé ni cual ni dónde ponerla.
Y otra cosa, ¿por qué cuando el secuenciador de imágenes acaba todas las imágenes hace un pequeño parón? Quiero decir, que cuando ha mostrado todas las imágenes y tu variable step vuelve a tomar el valor 0, en vez de tardar un tiempo 1000 (creo que se corresponde con 1 segundo) tarda un poco más. O bueno, yo creo que el parón ocurre cuando tu variable step es igual a 0 pero tu sabrás más que has hecho el código. La cuestión es si se puede arreglar ese parón.

McGregor · 22 Feb 2013, 15:09 · Solicitar retirada

Ok Yaneth. La verdad es que sí que estaba mirando la página en modo local. Espero que cuando la suba ya no me salga jeje

Jenkins · 22 Feb 2013, 23:26 · Solicitar retirada

Jeje si tienes razón hace un parón.. déjame ver que sera...

Creo que es por esto if (step < 4) {step++;} le puse cuatro xD ... Cambialo a 2 es que originalmente lo hice para mas imágenes sorry...

EL cero también cuenta así que te sirve para 3 imagenes, ademas si por ejemplo quieres agregarle una imagen mas basta con cambiarlo un poquito y listo mira:

<script language="javascript">
step=0;
function autoImgFlip() {
if (step < 3) {step++;}
else {step=0;}
if (step==0)
{a.src="objetos/foto01.jpg";}
if (step==1)
{a.src="objetos/foto02.jpg";}
setTimeout("autoImgFlip()", 3000); 
if (step==2)
{a.src="objetos/foto03.jpg";}
if (step==3)
{a.src="objetos/foto04.jpg";}

}
</script>
</head>

Ahora si lo que realmente quieres es que cada imagen tenga un enlace te funciona mejor usar el nivoslider

McGregor · 24 Feb 2013, 13:29 · Solicitar retirada

Ya veo. Pues tendré que recurrir al nivoslider ese aunque gracias por el código. ¿Las páginas web recurren a programas similares a ese para hacer estas cosas?
He visto que hay que subir un archivo del nivoslider al servidor para que funcione todo y creo recordar que ocupaba unos 30 kb o algo así. Ya sé que no es mucho, pero no importa subir esos archivos a la web ¿verdad? Me refiero a que si va a ralentizar la página o no.

nandogarcia · 2 Abr 2013, 17:51 · Solicitar retirada

hola jenkins, fantástico lo he probado y esta todo perfecto, solo una pequeña coña y es que la ultima imagen que se pone en el código tarda bastante mas que el resto en pasar, aun con esas reafirmarte mis felicitaciones por el codigo, si tienes alguna sugerencia para el tema que te comento lo recibiría con agrado
saludos