<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Garrafa</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<div class="principal">
<img id="tela1" src="img/tela1.jpg" style="display:none;"/>
<img id="tela2_agua_gota" src="img/tela2_agua_gota.jpg" style="display:none;"/>
<img id="tela2_martelo" src="img/tela2_martelo.jpg" style="display:none;"/>
<img id="tela3_agua_flornasce" src="img/tela3_agua_flornasce.jpg" style="display:none;"/>
<img id="tela3_martelo_pessoaanda" src="img/tela3_martelo_pessoaanda.jpg" style="display:none;"/>
<img id="tela4_agua_flormorre" src="img/tela4_agua_flormorre.jpg" style="display:none;"/>
<img id="tela4_martelo_pepe" src="img/tela4_martelo_pepe.jpg" style="display:none;"/>
<img id="tela5_telainicial" src="img/tela5_telainicial.jpg" style="display:none;"/>
<canvas id="meuCanvas" width="800px" height="800px" style="border:1px solid black">error 404</canvas>
<script type="text/javascript">
var cv = document.getElementById("meuCanvas");
var ctx = cv.getContext("2d"); //ctxo
window.onload = function() {
var image = document.getElementById("tela1");
ctx.drawImage(image, 0, 0, cv.width, cv.height);
i = 0;
j = 0;
t = setInterval(desenhaTela,2000);
}
document.onkeydown = function(evento) {
//direita
if (evento.keyCode == 39) {
j = 1;
}
//esquerda
if (evento.keyCode == 37) {
j = 2;
}
}
function desenhaTela()
{
//var meuArray = [ "tela1" , "tela2_agua_gota" , "tela2_martelo" , "tela3_agua_flornasce" , "tela3_martelo_pessoaanda" , "tela4_agua_flormorre" , "tela4_martelo_pepe"];
var meuArray = [["tela1" , "tela1"]["tela2_agua_gota","tela2_martelo"],["tela3_agua_flornasce" , "tela3_martelo_pessoaanda"], ["tela4_agua_flormorre" , "tela4_martelo_pepe"]];
var t;
var y;
if(j=1){
t = meuArray[i][0];
}
if(j=2){
t = meuArray[i][1];
}
var image = document.getElementById(t);
ctx.drawImage(image, 0, 0, cv.width, cv.height);
i++;
var y = i % meuArray.length;
if (y = 0) {
j = 0;
}
}
</script>
</div>
</body>
</html>