alternar imagenes

pithon · #1 (**permalink**) 24/05/2011, 03:17

Como tendria que hacer si tengo en pantalla por ejemplo en un div dos imagenes y en un periodo de tiempo las quiero cambiar por otras dos?

alguien sabria orientarme un poco los pasos a seguir o algun manual?

paskuini · #2 (**permalink**) 24/05/2011, 03:25

ni idea, pero he encontrado esto:
http://www.quackit.com/javascript/ja..._functions.cfm
http://www.gratismil.com/apuntes/jav...orizadores.htm
espero que te sirva

pithon · #3 (**permalink**) 24/05/2011, 05:03

paskuini gracias por el intento no esta mal pero no es lo que yo quiero gracias de todas formas saludos

alexg88 · #4 (**permalink**) 24/05/2011, 06:33

Con la función SetInterval puedes hacer lo que quieres.

Te permite definir una función que realizar cada cierto tiempo.

Un ejemplo:

Código HTML:

Ver original<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by alexg88</title>
  <script type="text/javascript" src="/js/lib/dummy.js"></script>
  
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type="text/css">
    
  </style>
  
  <script type="text/javascript">
  //<![CDATA[ 
  window.onload=function(){
  function cambiar(){  
   
elemento1=document.getElementById('1');
elemento2=document.getElementById('2');
    
    if (elemento1.style.display == "none")
    {
       elemento1.style.display = "";
       elemento2.style.display = "none";
    }
    else
    {
       elemento2.style.display = "";
       elemento1.style.display = "none";
    }
    
}
 
setInterval(cambiar,2000);
 
 
  }
  //]]> 
  </script>
  
</head>
<body>
  <div id="1" style="">
    <img src="http://www.blogcdn.com/es.autoblog.com/media/2009/02/renntech-g-wagen-web.jpg">   
    <img src="http://www.pcstorecr.com/virtual/images/G-08XU.jpg">   
</div>
 
<div id="2" style="display: none; ">
    <img src="http://www.pcstorecr.com/virtual/images/G-08XU.jpg">   
    <img src="http://www.blogcdn.com/es.autoblog.com/media/2009/02/renntech-g-wagen-web.jpg">   
</div>
 
</body></html>

pithon · #5 (**permalink**) 24/05/2011, 06:37

alexg88 gracias lo probare y te dire si es lo que busco aunque la verdad que me podias comentar un poco en que consistes pero no parece complicado lo intentare yo saludos

pithon · #6 (**permalink**) 24/05/2011, 06:46

alexg88 muchas gracias si era esto exactamente solo una cosa como funciona lo del tiempo?
y si quiero poner por ejemplo un maximo de 2 imagenes de mi db y que se alterner con las demas imagenes de mi db en dos en dos como seria

pato1925 · #7 (**permalink**) 24/05/2011, 07:16

Cita:

Iniciado por pithon

alexg88 muchas gracias si era esto exactamente solo una cosa como funciona lo del tiempo?
y si quiero poner por ejemplo un maximo de 2 imagenes de mi db y que se alterner con las demas imagenes de mi db en dos en dos como seria

setinterval funciona con milisegundos, osea 2000 equivale a 2 segundos

setInterval(cambiar,2000);//ejecuta function cambiar cada 2 segundos

pithon · #8 (**permalink**) 24/05/2011, 07:25

pato1925 gracias por la aclaracion pero ahora mi problema es el siguiente si quiero mostrar en pantalla las dos ultimas imagenes y quiero que se ballan cambiando por las dos siguientes y asin sucesivamente se puede hacer con javascript

alexg88 · #9 (**permalink**) 24/05/2011, 07:32

El ejemplo que te he dado era eso, solo un ejemplo para que vieras como usar la función SetInterval para realizar acciones cada cierto tiempo.

Luego tienes que adaptarlo a lo que tú necesitas. Si quieres sacar las imágenes de una base de datos tienes dos opciones:

Cargar todas las imágenes ocultas en el html y luego, mediante javascript, ir seleccionando las que quieres mostrar.
Cargarlas de dos en dos, pero necesitas AJAX para ello.

Si vas a usar AJAX, te recomiendo la librería JQuery que te permite realizar peticiones AJAX y manipular el DOM de manera muy sencilla.

pato1925 · #10 (**permalink**) 24/05/2011, 07:46

mm primero, si son las dos ultimas, entonces hay mas?? no lo creo... si tienes una cantidad grande de imagines, y quieres que se vayan mostrando las imagenes, podrias asignarles un valor a las imagenes (en base de datos) ...un orden...e ir en javascript asignandoles un valor con un for, para que ese mismo for muestre las imagenes, cada vez que vaya sumando la variable de iniciacion... eso se me ocurre ahora, tienes el codigo?

pithon · #11 (**permalink**) 24/05/2011, 08:32

alexg88 hay que usar ajax esque apenas domino javascript no hay algo parecido en javascript.

Cita:

mm primero, si son las dos ultimas, entonces hay mas?? no lo creo... si tienes una cantidad grande de imagines, y quieres que se vayan mostrando las imagenes, podrias asignarles un valor a las imagenes (en base de datos) ...un orden...e ir en javascript asignandoles un valor con un for, para que ese mismo for muestre las imagenes, cada vez que vaya sumando la variable de iniciacion... eso se me ocurre ahora, tienes el codigo?

pato1925 no todavia no tengo el codigo ya que no se ni por donde empezar la idea es esa mas o menos mostrar en dos en dos las imagenes alternandolas alternandolas con las dos ultimas publicadas algo asin que me aconsejais