[tutorial] permutação de imagens

Postagem de conteúdo sobre programação javascript
Post Reply
User avatar
Kodo no Kami
Admin
Admin
Posts: 739
Joined: Fri Jan 02, 2015 1:56 pm
Contact:

[tutorial] permutação de imagens

Post by Kodo no Kami » Sun May 03, 2015 9:32 am

fiz esse tuto para um membro de um outro forum entao resolvir postar aq pra vcs ^^

bem facil fazer segue um tuto improvisado ai (nao me culpe se seu serve pega fogo kkkkk zueira)
 
1º criamos uma tag img vai ser por ele que vamos alternar, podemos deixar atributo src em branco pq vamos usar o js para mudar automaticamente, tambem colocamos um atributo id na tag para conseguir manipular, caso seu site ja tenha uma img de banner basta pular essa parte

Code: Select all

<img src="" id="kodoimg">
agora criamos uma tag javascript dentro dela criamos uma funçao que vai mudar no caso chamei de kodo_mudar, nessa funçao vai ter um argumento tambem que vai ser um numero equivalente na array que vai ter varias imagem

Code: Select all

<img src="" id="kodoimg">
<script type="text/javascript">
function kodo_mudar(numero)
{
}
</script>
dentro da funçao usamos document.getElementById para manipular a tag img passamos para ele como argumento o id e tambem atribuimos o retorno para uma variavel

Code: Select all

<img src="" id="kodoimg">
<script type="text/javascript">
function kodo_mudar(numero)
{
var kodoimg = document.getElementById("kodoimg");
}
</script>
agora mudamos o atributo src pela variavel atribuimos a array que no caso vou chamar de kodoimgmudar e a posiçao sera o numero passado como argumento para nosso funçao

Code: Select all

<img src="" id="kodoimg">
<script type="text/javascript">
function kodo_mudar(numero)
{
var kodoimg = document.getElementById("kodoimg");
kodoimg.src = kodoimgmudar[numero];
}
</script>
fora da funçao criamos a array (deveria ter começado criando ela ne, mais esqueci isso acontece kkkk), no caso basta coloca as url das imagem na array ou local caso elas esteja no server

Code: Select all

<img src="" id="kodoimg">
<script type="text/javascript">
var kodoimgmudar = ["highkoneko.jpg","highashia.jpg"];
function kodo_mudar(numero)
{
var kodoimg = document.getElementById("kodoimg");
kodoimg.src = kodoimgmudar[numero];
}
</script>
a parte que faz a imagem mudar ta pronta para testar basta abrir o navegador e abrir o inspecionar elemento (firebug no caso do firefox) e depois console e chamar a funçao passando o numero equivalente a posiçao da imagem no caso aqui seria kodo_mudar(0); , agora vamos colocar uma variavel com e setar nela o numero da primeira imagem essa variavel vai servi para localizar a posiçao na array (lembrando que o contador começa com 0)

Code: Select all

<img src="" id="kodoimg">
<script type="text/javascript">
var kodoimgmudar = ["highkoneko.jpg","highashia.jpg"];
var kodopos = 0;
function kodo_mudar(numero)
{
var kodoimg = document.getElementById("kodoimg");
kodoimg.src = kodoimgmudar[numero];
}
</script>
criamos outra funçao que vai fazer o trabalho de permutar automatico (nao vamos usar a funçao anterior pq podemos usar ela para criar botao para voltar alguma imagem), no caso chamei essa funçao de kodo_auto

Code: Select all

<img src="" id="kodoimg">
<script type="text/javascript">
var kodoimgmudar = ["highkoneko.jpg","highashia.jpg"];
var kodopos = 0;
function kodo_mudar(numero)
{
var kodoimg = document.getElementById("kodoimg");
kodoimg.src = kodoimgmudar[numero];
}
function kodo_auto()
{
}
</script>
primeira coisa que vamos checar nessa funçao é se o valor da posição e maior doq o numero de imagens dentro da array se for entao ele zera a posiçao no caso começa denovo (porem temos que colocar -1 pela quantidade devido a contagem começa no 0 ou seja no meu exemplo tem 2 imagem entao seria o numero 1)

Code: Select all

<img src="" id="kodoimg">
<script type="text/javascript">
var kodoimgmudar = ["highkoneko.jpg","highashia.jpg"];
var kodopos = 0;
function kodo_mudar(numero)
{
var kodoimg = document.getElementById("kodoimg");
kodoimg.src = kodoimgmudar[numero];
}
function kodo_auto()
{
if(kodopos > 1)
{
kodopos = 0;
}
}
</script>
agora chamamos a funçao que muda a imagem dentro dessa, passamos como argumento o a posiçao, depois incrementamos +1 para a posiçao para que na proxima vez seja chamado a outra imagem

Code: Select all

<img src="" id="kodoimg">
<script type="text/javascript">
var kodoimgmudar = ["highkoneko.jpg","highashia.jpg"];
var kodopos = 0;
function kodo_mudar(numero)
{
var kodoimg = document.getElementById("kodoimg");
kodoimg.src = kodoimgmudar[numero];
}
function kodo_auto()
{
if(kodopos > 1)
{
kodopos = 0;
}
kodo_mudar(kodopos);
kodopos++;
}
</script>
por fim usamos a funçao setInterval para chamar a funçao automaticamente a cada intervalo, passamos como argumento para ela como string a funçao que muda automaticamente e o tempo em milesimos de segundo (1000 = 1 segundo)

Code: Select all

<img src="" id="kodoimg">
<script type="text/javascript">
var kodoimgmudar = ["highkoneko.jpg","highashia.jpg"];
var kodopos = 0;
function kodo_mudar(numero)
{
var kodoimg = document.getElementById("kodoimg");
kodoimg.src = kodoimgmudar[numero];
}
function kodo_auto()
{
if(kodopos > 1)
{
kodopos = 0;
}
kodo_mudar(kodopos);
kodopos++;
}
 
setInterval("kodo_auto()",1000);
</script>
 
exemplo online http://fts315.xp3.biz/Exemplo/permutcao_imagem/

by kodo no kami
Image

que desagradavel ~ mirai kuriyama

Post Reply

Return to “Javascript”