Pasar siguiente imagen

SeaPirates · #1 (**permalink**) 21/02/2010, 12:39

Tengo este script de un banner toratorio:

Código Javascript:

Ver original<body>
 
<body onload="alternar_banner()">
 
<script>
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(670,250)
array_imagen[0].src = "/slides/slide_craft_a.png"
array_imagen[1] = new Image(670,250)
array_imagen[1].src = "/slides/slide_habberos_a.png"
array_imagen[2] = new Image(670,250)
array_imagen[2].src = "/slides/slide_cs_a.png"
array_imagen[3] = new Image(670,250)
array_imagen[3].src = "/slides/slide_soccer_a.png"
 
//creo el array de URLs
array_url = new Array(4)
array_url[0] = "http://starcraft.gameshoot.es"
array_url[1] = "http://www.habberos.es"
array_url[2] = "http://cs.gameshoot.es"
array_url[3] = "http://soccerDT.gameshoot.es"
 
//variable para llevar la cuenta de la imagen siguiente
contador = 0
 
//función para rotar el banner
function alternar_banner(){
window.document["banner"].src = array_imagen[contador].src
window.document['banner'].parentNode.href = array_url[contador]
contador ++
contador = contador &#37; array_imagen.length
setTimeout("alternar_banner()",7000)
} </script>
</head>
 
<script language="Javascript">
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="hidden";
}
</script>
 
<div id="capa1" style="position:relative;" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')"><div 
 
align="center" id="capa2" style="position:absolute;width:669px;height:20;background-color:black;opacity: .5;"><a 
 
href=""><div style="opacity: .9;"><font color="white">&#171; Anterior</a> | <a href=""><font color="white">Siguiente 
 
&#187;</font></a></div></div><a href="http://www.habberos.es/#"><img style="" src="#" name="banner" 
 
onmouseover="this.src =
this.src.replace(/_\w(\.png)$/, '_b.png\1');" onmouseout="this.src = this.src.replace(/_\w(\.png)$/, '_a.png\1');"
 
width="670" height="250" border=0></a></div>
 
</body>
</html>

Pero necesito que cuando le den a Anterior o siguiente cambie la imagen hacia atras o hacia delante segun hayan pulsado, como hago esto?

SeaPirates · #2 (**permalink**) 23/02/2010, 07:59

alguien sabe como hacerlo? por favor?

Asieio · #3 (**permalink**) 23/02/2010, 08:04

Para adelante contador+1 y para atrás contador-1 . Ya lo tienes hecho, sólo tienes que crear una función para cada (anterior y siguiente)

SeaPirates · #4 (**permalink**) 23/02/2010, 08:06

con javascript no se como hacerlo

es asi?

function siguiente{
contador+1
}

?¿

SeaPirates · #5 (**permalink**) 24/02/2010, 08:00

Por favor, respondan ;(

Bam_Margera · #6 (**permalink**) 24/02/2010, 08:16

contador++; te recomiendo esto http://keepyourlinks.com/link1.php?id=325 (sin animo de hacer spam, tengo mis enlacs guardados alli)

SeaPirates · #7 (**permalink**) 24/02/2010, 14:29

Código Javascript:

Ver original//función para rotar el banner
function alternar_banner(){
window.document["banner"].src = array_imagen[contador].src
window.document['banner'].parentNode.href = array_url[contador]
contador ++
contador = contador % array_imagen.length
setTimeout("alternar_banner()",7000)
}
function siguiente{
contador++
}
</script>

asi?

Y para activar la funcion en el href:

<a href="#" onclick="siguiente()">Siguiente</a>

?¿

SeaPirates · #8 (**permalink**) 25/02/2010, 12:45

es asi?? ¬¬

Tecna · #9 (**permalink**) 25/02/2010, 13:46

Buenas,

según el último código que has puesto, la función alternar_banner() se llama a sí misma cada cierto tiempo infinitas veces, pero no llegará a ejecutarse nunca porque no la llamas desde ningún sitio. Para hacer lo que quieres tendrias que llamarla desde siguiente y sólo incrementar el contador ahí. Tendrías que tener también en cuenta qué debería hacer la función anterior, cuando contador sea menor que cero. Seria algo así:

Código Javascript:

Ver original//función para rotar el banner
function alternar_banner()
{
        // en esta función sólo ponemos el cambio de baner y así se puede usar 
        // desde anterior y desde siguiente
        window.document["banner"].src = array_imagen[contador].src;
        window.document['banner'].parentNode.href = array_url[contador];
        // contador ++   <--------- esto no deberia ir aqui
        // contador = contador % array_imagen.length <-------- esto tampoco 
        // setTimeout("alternar_banner()",7000) <----------- ni esto
}
 
function siguiente
{
        contador++;
        // si cuando acabes quieres que vuelva a empezar incluye esta linea
        contador = contador % array_imagen.length ;
        // también se podría hacer que si es el último o el primero no haga nada
        if ( contador == array_imagen.length) 
        {
                contador--;
                return;
        }
 
        setTimeout("alternar_banner()",7000) ;
        //no es obligatorio  pero si recomendable poner el punto y coma al final
        // de cada instruccion
}
</script>

y así ya podrías llamar a la función como habías puesto.

Sería conveniente también controlar la propagación de eventos por si se lanza un nuevo evento antes de que finalice el que se esta ejecutando. Para eso tendrías que hacer una función que se encargara de esto y que sería la que llamaría a siguiente y a anterior.

SeaPirates · #10 (**permalink**) 26/02/2010, 00:32

No me va...:

Código Javascript:

Ver original<script>
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(670,250)
array_imagen[0].src = "/slides/slide_craft_a.png"
array_imagen[1] = new Image(670,250)
array_imagen[1].src = "/slides/slide_habberos_a.png"
array_imagen[2] = new Image(670,250)
array_imagen[2].src = "/slides/slide_cs_a.png"
array_imagen[3] = new Image(670,250)
array_imagen[3].src = "/slides/slide_soccer_a.png"
 
//creo el array de URLs
array_url = new Array(4)
array_url[0] = "http://starcraft.gameshoot.es"
array_url[1] = "http://www.habberos.es"
array_url[2] = "http://cs.gameshoot.es"
array_url[3] = "http://soccerDT.gameshoot.es"
 
//variable para llevar la cuenta de la imagen siguiente
contador = 0
 
//función para rotar el banner
function alternar_banner()
{
        // en esta función sólo ponemos el cambio de baner y así se puede usar 
        // desde anterior y desde siguiente
        window.document["banner"].src = array_imagen[contador].src;
        window.document['banner'].parentNode.href = array_url[contador];
}
 
function siguiente
{
        contador++;
        // si cuando acabes quieres que vuelva a empezar incluye esta linea
        contador = contador % array_imagen.length ;
        // también se podría hacer que si es el último o el primero no haga nada
        if ( contador == array_imagen.length) 
        {
                contador--;
                return;
        }
 
        setTimeout("alternar_banner()",7000) ;
        //no es obligatorio  pero si recomendable poner el punto y coma al final
        // de cada instruccion
}
</script>

Tecna · #11 (**permalink**) 26/02/2010, 10:52

Buenas,

habría hecho falta el html para poderlo probar o que dieras algo mas de información sobre el error que da. Pero bueno aquí tienes un ejemplo que funciona:

Código HTML:

Ver original<div >
        <a href="#"><img id="img_baner" src=""></a>
</div>
 
<ul>
        <li id="anterior">Anterior</li>
        <li id="siguiente">Siguiente</li>
</ul>

Código Javascript:

Ver originalvar contador = 0;
var imagenes = ['fichero_img', 'fichero_img', 'fichero_img',  'fichero_img' ];
var urls = ['url', 'url', 'url', 'url'];
 
function init()
{
        var liAnt = document.getElementById('anterior');
        var liSig = document.getElementById('siguiente');
        liAnt.onclick = anterior;
        liSig.onclick = siguiente;
 
        mostrarBaner();
}
 
window.onload = init; 
 
function mostrarBaner()
{
        var img_baner = document.getElementById('img_baner');
        img_baner.src = imagenes[contador];
        img_baner.parentNode.href = urls[contador];
}
 
function anterior()
{
        if (contador != 0) contador--; 
        mostrarBaner();
}
 
function siguiente()
{
        if (contador < urls.length -1) contador++;
        mostrarBaner();
}

SeaPirates · #12 (**permalink**) 27/02/2010, 03:33

Me estoy liando, ya no se donde meter cada script xD

El primer script que me diste, cuando lo pongo el banner se queda en blanco y no puedo pasar las imagenes, y el segundo igual..

Igual es que no lo coloco bien con el script el banner, prueba a ponerlo tu por favor.
Y gracias por tu ayuda

Tecna · #13 (**permalink**) 27/02/2010, 04:36

Buenas,

el último código que te he puesto, es un ejemplo basado en lo que querías hacer y tal cual está funciona. El javascript iría en un fichero externo que tendrías que incluir en el html dentro de <head> con:

Código HTML:

Ver original<script type="text/javascript" src="fichero.js"></script>

por supuesto tendrás que cambiar los nombres del fichero js y de los ficheros de imagenes y urls a los que tu tengas. Pruébalo tal como está y cuando lo entiendas podrás adaptarlo a tu código. Pero te repito que funciona, lo se porque lo he hecho yo y lo he probado ¿que mas quieres que haga?

Y la próxima vez si das mas información mucho mejor, porque decir que no te va o que no lo colocas bien, sin poder verlo no sirve de mucho, por eso el ejemplo puede que no se adapte a tu código porque no has puesto el html, tendrás que adaptarlo tu, pero no será complicado.

SeaPirates · #14 (**permalink**) 27/02/2010, 06:47

Lo que no hace es pasar las imagenes automaticamente como el otro script, como se puede hacer?

SeaPirates · #15 (**permalink**) 02/03/2010, 00:36

como hago ?¿?