visor de imagnes

normagomezrojas1 · #1 (**permalink**) 06/01/2011, 14:19

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**) 06/01/2011, 15:47

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 originalfunction siguiente(){
if (actual < 4) {
visor.src = fotos[actual];
actual++;
}
 
if(actual == 4){
  actual = 0;
}
}

#3 (**permalink**) 06/01/2011, 15:54

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

Código Javascript:

Ver originaldetener = 0;
function siguiente(){
  if(detener == 1){
    clearInterval();
    return;
  }
  if (actual < 4) {
    visor.src = fotos[actual];
    actual++;
  }
  if(actual == 4){
    actual = 0;
  }
}
function diapositiva(){
detener = 0;
setInterval('siguiente()', 1000);
 
}
 
function pause(){
  detener = 1;
}

Corrobore el resultado !!!

normagomezrojas1 · #4 (**permalink**) 07/01/2011, 02:49

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é

normagomezrojas1 · #5 (**permalink**) 09/01/2011, 06:51

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>