Foros del Web » Programando para Internet » Javascript »

visor de imagnes

Estas en el tema de visor de imagnes en el foro de Javascript en Foros del Web. Tengo el siguiente codigo del visor de imagenes, el problema es que debo generra un botón play que vaya pasando las imagenes de manera consecutiva, ...
  #1 (permalink)  
Antiguo 06/01/2011, 14:19
 
Fecha de Ingreso: enero-2011
Ubicación: Colombia
Mensajes: 6
Antigüedad: 13 años, 3 meses
Puntos: 1
visor de imagnes

Tengo el siguiente codigo del visor de imagenes, el problema es que debo generra un botón play que vaya pasando las imagenes de manera consecutiva, pero al llegar a la ultima imagen se detiene, lo que necesito es que vuelva a la foto[0], que no pare la reproduccion de las imagenes sólo hasta pulsar pause, que tambien tengo problemas para programar este botón.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
img{
height:300px;
}
.mini{
height:50px;
}
</style>


</head>
<body>

<img src="imagen1.jpg" id="vis">
<button onclick="atras();"> << </button>
<button onclick="siguiente();"> >> </button>
<button onclick="diapositiva();"> Play </button>
<button onclick="play();"> Pause</button>
<br/>
<img src="imagen1.jpg" onclick="cambia(0);" class="mini" />
<img src="imagen2.jpg" onclick="cambia(1);" class="mini" />
<img src="imagen3.jpg" onclick="cambia(2);" class="mini" />
<img src="imagen4.jpg" onclick="cambia(3);" class="mini" />
<img src="imagen5.jpg" onclick="cambia(4);" class="mini" />

<script type="text/javascript">

var actual = 0;
var visor = document.getElementById("vis");

var fotos = new Array(5);
fotos[0] = "imagen1.jpg";
fotos[1] = "imagen2.jpg";
fotos[2] = "imagen3.jpg";
fotos[3] = "imagen4.jpg";
fotos[4] = "imagen5.jpg";

function cambia(x){
actual = x;
visor.src = fotos[actual];
}

function atras(){
if (actual > 0) {
actual--;
visor.src = fotos[actual];
}
}
function siguiente(){
if (actual < 4) {
actual++;
visor.src = fotos[actual];
}
}
function diapositiva(){

setInterval('siguiente()', 1000);

}


</script>
</body>
</html>
  #2 (permalink)  
Antiguo 06/01/2011, 15:47
4ng3r
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: visor de imagnes

hummm no es mejor que use un Framework ?? o sino debe validar que cuando que cuando la variable actual sea igual al tamaño del arreglo, en este caso 4 que reinicie la variable y cambie de posición el actual++; o sino toma desde la primera foto. mas o menos el codigo queda asi ... no lo he probado

Código Javascript:
Ver original
  1. function siguiente(){
  2. if (actual < 4) {
  3. visor.src = fotos[actual];
  4. actual++;
  5. }
  6.  
  7. if(actual == 4){
  8.   actual = 0;
  9. }
  10. }
  #3 (permalink)  
Antiguo 06/01/2011, 15:54
4ng3r
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: visor de imagnes

Para el pause ... puede quedar mas o menos asi ...

Código Javascript:
Ver original
  1. detener = 0;
  2. function siguiente(){
  3.   if(detener == 1){
  4.     clearInterval();
  5.     return;
  6.   }
  7.   if (actual < 4) {
  8.     visor.src = fotos[actual];
  9.     actual++;
  10.   }
  11.   if(actual == 4){
  12.     actual = 0;
  13.   }
  14. }
  15. function diapositiva(){
  16. detener = 0;
  17. setInterval('siguiente()', 1000);
  18.  
  19. }
  20.  
  21. function pause(){
  22.   detener = 1;
  23. }

Corrobore el resultado !!!
  #4 (permalink)  
Antiguo 07/01/2011, 02:49
 
Fecha de Ingreso: enero-2011
Ubicación: Colombia
Mensajes: 6
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: visor de imagnes

Gracias funciona, pero cuando le doy play de nuevo, pues no sigue, voy a mirar el código a ver que le agrego, tu aporte ha sido estupendo y ya te contaré cómo lo solucioné
  #5 (permalink)  
Antiguo 09/01/2011, 06:51
 
Fecha de Ingreso: enero-2011
Ubicación: Colombia
Mensajes: 6
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: visor de imagnes

bueno mira el codigo quedó asi, tenia varios problemas: uno era que al dar click en play de nuevo no funcionaba (habiendo oprimido pause) y otro era que al dar click varias veces en el botón play se iba sumando el tiempo entonces las imagenes pasaban con gran rapidez.... pero con tu respuesta y unas modificaciones quedó de la siguiente manera, ahora quiero recordar la imagen visitada por medio de una cookie, agregué una función llamada cook pero no obtiene el resultado, cada vez que actualizo la pagina empieza en la primera imagen y no en la ultima donde quedé; gracias por tu ayuda.
ahi va el codigo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
img{
height:300px;
}
.mini{
height:50px;
}
</style>


</head>
<body>

<img src="imagen1.jpg" id="vis">
<button onclick="atras();"> << </button>
<button onclick="siguiente();"> >> </button>
<button onclick="diapositiva();"> Play </button>
<button onclick="pause();"> Pause</button>
<br/>
<img src="imagen1.jpg" onclick="cambia(0);" class="mini" />
<img src="imagen2.jpg" onclick="cambia(1);" class="mini" />
<img src="imagen3.jpg" onclick="cambia(2);" class="mini" />
<img src="imagen4.jpg" onclick="cambia(3);" class="mini" />
<img src="imagen5.jpg" onclick="cambia(4);" class="mini" />

<script type="text/javascript">


var actual = 0;
var visor = document.getElementById("vis");
var funcionando = false;
var tiempo;

var fotos = new Array(5);
fotos[0] = "imagen1.jpg";
fotos[1] = "imagen2.jpg";
fotos[2] = "imagen3.jpg";
fotos[3] = "imagen4.jpg";
fotos[4] = "imagen5.jpg";

function cambia(x){
actual = x;
visor.src = fotos[actual];
}

function atras(){
if (actual > 0) {
actual--;
visor.src = fotos[actual];
}
}
function siguiente(){


if (actual < 4) {
actual++;
visor.src = fotos[actual];
}else{
actual = 0;
visor.src = fotos[actual];
}

}
function diapositiva(){
if (funcionando == false) {
tiempo = window.setInterval('siguiente();', 1000);
funcionando = true;
}
}
function pause(){
window.clearInterval(tiempo);
funcionando = false;
}

function cook(){
var nombrar = "guardar"
var contenido = fotos[2]
document.cookie = nombrar + contenido;
var cooks = document.cookie;
alert(cooks)

}
</script>
<script type="text/javascript">
cook();

</script>
</body>
</html>

Etiquetas: visor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:03.