1

a ver si me podéis echar un cable. Estoy haciendo una página web y quiero hacer que se vayan pasando imagenes cada x tiempo. Lo que tengo ahora mismo es:

JAVASCRIPT:

miBanner = document.getElementById("canvas");
ctx = miBanner.getContext("2d");


var i=0;
var imagenes = ["./img/banner1.jpeg","./img/banner2.jpg","./img/banner3.png"];
img = new Image ();


function dibujar(){ 
    img.src = imagenes[0];
    ctx.drawImage(img, 0, 0, 900, 260);

    if(i<2){
        i++;
    }
    else{
        i=0;}
    }//dibujar()

setInterval(dibujar,300);

HTML:

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

Pero se queda la imagen estática. A ver si me podéis decir el fallo. Muchas gracias!

1 respuesta 1

1

Hola te hice una pequeña demo, lo cierto es no he utilizado canvas, pero te puede servir como base, aunque no cambia mucho si lo haces con el canvas.

HTML:

<img id="to_show" src="" width="300px" heigth="300px" alt="">

JS:

var pos=0;
var to_show = document.getElementById('to_show');
var imagenes = 
['https://www.google.es/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png','http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg'];


function dibujar(pos ){
    //Cada vez que se llama esta funcion, vamos mostrando la imagen de la posicion que nos pasa.
    to_show.src = imagenes[pos-1];
}


var to = setInterval(function(){
    pos++;
    dibujar(pos);
  //SI la variable que vamos incrementando es igual que la longitud de nuestro array, limpiamos el intervalo.
  if(pos == imagenes.length){
    clearInterval(to);
  }
},1000);

DEMO

2
  • lo probaré también de tu forma, parece fácil. Muchas gracias!
    – Miguel
    Commented el 23 mar. 2018 a las 19:33
  • De nada y como dice @bercklyn Carlosviza el fallo era que solo mostrabas la imagen en la posición de 0.
    – MitaCloud
    Commented el 23 mar. 2018 a las 19:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.