ayuda con javascript

maika52 · #1 (**permalink**) 02/01/2003, 04:22

necesito usar un javascript que me deje pasar de una imagen a otra pulsando un botón. en scriptmaster hay uno, pero tiene la pega de que el boton de adelante y el de atrás no tiene tope. O sea, yo tengo tres imágenes, sale la primera, y cuando pulso en siguiente me sale la 2ª y después la 3ª, ahí es donde yo quiero que pare, porque una vez que sale la 3ª si le doy a siguiente me vuelve a sacar la 1ª otra vez. y con el botoón de atras pasa lo mismo. Seguro que es una tontería , pero no sé nada de javascript, os dejo el código, ojalá alguien pueda echarme una mano,
gracias, ahí va:

<html>
<head>


<SCRIPT LANGUAGE="JavaScript">




</script>

</head>

<body>


<img src="images/1.gif" name="slideshow">
<table>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
<td align="center"><a href="javascript:auto()">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>

</body>
</html>

Kaopectate · #2 (**permalink**) 02/01/2003, 05:30

Hola maika52.

Yo le haría unos pocos cambios, entre ellos el uso de botones para poder deshabilitar mas facilmente. Quedaría asi:

Código PHP:

  <html> 
<head> 
<!-- PRIMER PASO: Copiar dentro del tag HEAD --> 
 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- Original: Mike Canonigo (mike@canonigo.com) --> 
<!-- Web Site: [url]http://www.munkeehead.com[/url] --> 
 
<!-- Begin 
NewImg = new Array ( 
"images/1.gif", 
"images/2.gif", 
"images/3.gif" 
); 
var ImgNum = 0; 
var ImgLength = NewImg.length - 1; 
 
//Time delay between Slides in milliseconds 
var delay = 3000; 
 
var lock = false; 
var run; 
 
function chgImg(direction) { 
if (document.images) { 
document.frm.prev.disabled = false; 
document.frm.next.disabled = false; 
ImgNum = ImgNum + direction; 
if (ImgNum > ImgLength - 1) { 
document.frm.next.disabled = true; 
} 
if (ImgNum == 0) { 
document.frm.prev.disabled = true; 
} 
document.slideshow.src = NewImg[ImgNum]; 
} 
} 
 
function auto() { 
if (lock == true) { 
var ImgNum = 0; 
document.frm.prev.disabled = true; 
document.frm.next.disabled = false; 
lock = false; 
window.clearInterval(run); 
} 
else if (lock == false) { 
document.frm.prev.disabled = true; 
document.frm.next.disabled = true; 
lock = true; 
run = setInterval("chgImg(1)", delay); 
} 
} 
// End --> 
</script> 
 
</head> 
 
<body> 
<!-- SEGUNDO PASO: Copiar dentro del tag BODY --> 
 
<form name="frm"> 
<img src="images/1.gif" name="slideshow"> 
<table> 
<tr> 
<td align="right"> 
<input type="button" name="prev" value="Previous" onclick="chgImg(-1)" disabled></td> 
<td align="center"> 
<input type="button" name="Auto" value="Auto/Stop" onclick="auto()"></td> 
<td align="left"> 
<input type="button" name="next" value="Next" onclick="chgImg(1)"></td> 
</tr> 
</table> 
</form> 
</body> 
</html>

Espero que te sirva.

maika52 · #3 (**permalink**) 02/01/2003, 06:03

Hola Kaopectate!
gracias, esto era justo lo que quería, gracias tambien por contestar tan rápido.
donde podría aprender?

tunait · #4 (**permalink**) 02/01/2003, 06:06

Buen día Kaopectate, hoy fuiste tú más rápido , jejejeje

Bueno yo le dejé los links tal y como están.

Ahí va mi solución para quien quiera hacerlo con links

Código PHP:

  <html> 
<head> 
<!-- PRIMER PASO: Copiar dentro del tag HEAD --> 
 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- Original: Mike Canonigo (mike@canonigo.com) --> 
<!-- Web Site: [url]http://www.munkeehead.com[/url] --> 
 
<!-- Begin 
NewImg = new Array ( 
 
"images/1.gif", 
"images/2.gif", 
"images/3.gif" 
 
); 
var ImgNum = 0; 
var ImgLength = NewImg.length - 1; 
 
//Time delay between Slides in milliseconds 
var delay = 3000; 
 
var lock = false; 
var run; 
function chgImg(direction) { 
if (document.images) { 
ImgNum = ImgNum + direction;} 
if (ImgNum > ImgLength) { 
alert('No hay más imágenes') 
ImgNum = ImgNum - direction; 
if(lock == true){auto()} 
} 
else{ 
} 
if (ImgNum < 0) { 
alert('No hay más imágenes') 
ImgNum = ImgNum - direction; 
} 
document.slideshow.src = NewImg[ImgNum]; 
} 
 
function auto() { 
if (lock == true) { 
lock = false; 
window.clearInterval(run); 
} 
else if (lock == false) { 
lock = true; 
run = setInterval("chgImg(1)", delay); 
} 
} 
// End --> 
</script> 
 
</head> 
 
<body> 
<!-- SEGUNDO PASO: Copiar dentro del tag BODY --> 
 
<img src="images/1.gif" name="slideshow"> 
<table> 
<tr> 
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td> 
<td align="center"><a href="javascript:auto()">Auto/Stop</a></td> 
<td align="left"><a href="javascript:chgImg(1)">Next</a></td> 
</tr> 
</table> 
 
</body> 
</html>

p.d. me gusta más la propuesta de desactivar los botones que la alerta

Saludos

maika52 · #5 (**permalink**) 02/01/2003, 06:31

hola de nuevo, si no es mucho pedir, cómo podría usar imágenes en vez de botones? no sé cómo hacer con el prev y el next, me da error.
gracias
saludos

<form name="frm">
<img src="../../images/chimeneas/puertas-sara-1.jpg" name="slideshow">
<table>
<tr>
<td align="right">
<input type="image" src="../../../images/flechavolver.gif" name="prev" value="Previous" onclick="chgImg(-1)" disabled></td>
<td align="left">
<input type="image" src="../../../images/flecha.gif" name="next" value="Next" onclick="chgImg(1)"></td>
</tr>
</table>
</form>

Kaopectate · #6 (**permalink**) 02/01/2003, 08:21

Hola tuni, como siempre es un placer coincidir contigo.

Maika, lo que tendrías que hacer en mi ejemplo (*) es sustituir los tags <input type="button" name="tal" value="tal" onclick="tal"> por tags <img src="miimagen.gif" name="tal" onclick="tal">

El problema es que no puedes deshabilitar de la misma manera una imagen. Tendrías que hacer dos imágenes distintas por cada botón para simular el estado de deshabilitado o mejorar un poquito la función para que te salga un alert cuando quieras ver la anterior y estés en la primera (mas fácil).

Si vas a implementar eso último dime y te modifico el código. No lo pongo de una vez porque si no presiono "enviar" pronto me gana tunait.

Saludos.

(*) el spam interno no está prohibido

maika52 · #7 (**permalink**) 02/01/2003, 10:29

Hola de nuevo,
claro, era muy sencillo, gracias otra vez,
la última pregunta, no puede hacerse que en la primera vez no aparezca la flecha de anterior ni en la última la de siguiente en vez de añadir más imágenes?. bueno, y en el caso de añadirlas, dónde tendría que ponerlas?
sobre lo de los alert, la verdad es que nunca me han gustado, pero la idea está bien
por cierto, gracias a los dos por la ayuda
saludos

Kaopectate · #8 (**permalink**) 02/01/2003, 10:36

Resumo: Quieres que por ejemplo la primera vez no aparezca el botón "Primera" y cuando esté al final no aparezca "Ultimo". ¿Cierto?. De ser asi, dime un par de cosas:

- Estás usando algún lenguaje servidor además de esto (no es necesario de cualquier modo).
- Que compatibilidad deseas (¿IE-5 / NS-6 / O-6?)?
- ¿Vas a quedarte con las <img>s o los <input type="button>s?

maika52 · #9 (**permalink**) 02/01/2003, 11:43

hola Kaopectate, sí, es eso lo que quiero, siento no haber sido muy clara antes.
Me gustaría que pudiera verse tanto en netscape como en explorer, y al final me quedo con las imágenes, tengo una flecha para ir hacia delante y otra para ir hacia atrás.
A lo del lenguaje servidor no puedo contestarte porque no entiendo a qué te refieres, ya me dirás.
oye, muchísimas gracias por molestarte tanto
chao un saludo