[tutorial] permutação de imagens

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

Código:

<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

Código:

<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

Código:

<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

Código:

<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

Código:

<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)

Código:

<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

Código:

<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)

Código:

<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

Código:

<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)

Código:

<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 [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]