Slide de Novidades e engenharia reversa - Como fazer um site #5

Oi gente, tudo bem com vocês? Comigo está tudo ótimo! ^^
Bom galera, preparem porque hoje é dia de um longo tutorial...
Eu poderia simplesmente ensinar como eu fiz o sistema de novidades que vou usar no meu site, mas resolvi falar também de engenharia reversa... Na verdade o que vou ensinar não pode ser considerado engenharia reversa, pois o código que estamos vendo é interpretado e não compilado(que para ser visto teria que se fazer a engenharia reversa)...
Só falei desse termo, pois se você seguiu minhas dicas, deve ter se inspirado em alguns sites pra fazer o layout do seu, mas transformar o layout em algo funcional em alguns casos pode ser mais complicado do que foi até o momento...
Escolhi como exemplo o slide que vou colocar abaixo... Ele foi criado por mim, almenos eu nunca tinha visto algo exatamente igual a ele em outro site... Porém, se eu quisesse um slide com as mesmas animações de outro site, eu poderia copiar o código, fazer alterações pra mudar o visual, enfim... Mas não precisaria quebrar minha cabeça criando o javascript ou o código html... Claro que não é tão simples de se copiar um site... Você terá que analisar em que parte o código html(do elemento que você quer) começa, copiar até onde termina, depois terá que fazer o mesmo com o código javascript e com os estilos em css... Quanto mais você fizer sites, mais fácil a tarefa de entender o trabalho de outros desenvolvedores se tornará mais fácil...
Bom, vamos ao meu exemplo então... Vamos supor que eu não tivesse criado o meu slide, e que ele tivesse sido feito por outra pessoa, estivesse em outro site, como eu não quero quebrar minha cabeça criando um código, ou não sei como fazer isso, vou tentar copiar o código existente... O slide em funcionamento é assim:

 

Faça uma avaliação do meu novo site! Confira aqui, métodos para tirar medidas... Dúvidas? Converse comigo por uma de minhas redes sociais! ^^ Site novo, preços reformulados, confira!

 

Bom, eu ia inserir o slide aqui em cima, mas esse modelo de layout do blogger sempre trava quando a gente coloca algum código que eles interpretam inteligente demais...rsrs Ele é mais pra texto mesmo... Depois eu vou tentar colocar o slide pelo modo HTML, acho que vou conseguir, mas se não conseguir, me desculpem, a culpa não é minha...
Enfim, vamos à analise, antes de mais nada, quero dizer que estou usando o Google Chrome como navegador, os outros navegadores também tem essa ferramenta de inspetor, porém pode haver algumas diferenças de posicionamento das opções, enfim...
Pra você começar a copiar alguma coisa legal de outro site, você clica com o botão direito sobre o que você quer... Isso irá exibir um menu com várias opções(se não for exibido por algum bloqueio do botão direito do mouse não há problemas, aperte ctrl + shift + i e continue lendo que você aprenderá como passar por cima disso)... Selecione inspecionar elemento...

Note que o elemento com qual você estava com o mouse em cima, foi destacado no código html que aparece no console de inspetor... Mas no caso do slide que é formado por vários elementos, selecionar apenas um não copiará o código pra você usar no seu site, você terá que navegar pelo código html do site, e achar tudo que faz parte do sistema de slides para copiar... Você pode fazer isso selecionando as tags do código, isto irá destacar ao que o código se refere, ou seja, o que você copiará, caso pegue essa parte do código...

Viram só como selecionando as tags consegui descobrir quais partes do código eu preciso copiar? Eu precisarei copiar as tags div com classe seta_novidade e a tag div com id news, lembrando que quando copiar essas tags vou copiar também todo conteúdo dentro delas...
É isso que você deverá fazer caso não consiga clicar com o botão direito, após abrir o inspetor pelo atalho do seu teclado, você vai selecionando as tags, procurando nelas o que você quer copiar... Você pode expandi-las(pra ver o que há dentro delas), ou compactá-las(se o que houver dentro delas não for o que você procura), pra fazer isso você deve clicar no triângulo que fica ao lado de cada tag...
É claro que em alguns casos a estrutura dos elementos é mais complexa e você demorará para entender quais elementos você deve copiar, às vezes você precisará ir testando, até que consiga fazer o seu código funcionar sem erros...

Caso você esteja tendo muitas dificuldades você também pode deixar uma pergunta tipo esta em fóruns: "como faço um slide como o deste link"... Lá haverão pessoas mais experientes que poderão criar um código mais simples pra você, ou conseguirão descobrir as partes que você precisam ser copiadas e vão te responder... Um fórum muito bom é o stack overflow(http://stackoverflow.com/) ele é gringo, mas você pode perguntar em português também, pois há usuários brasileiros...
Se vocês quiserem também podem enviar links nos comentários deste post, aconselho que enviem um email junto com o comentário pra eu poder responder por email pra vocês... ^^

Mas enfim, depois de encontrar o que deve ser copiado, copiar é fácil, é só selecionar a tag que quer copiar, clicar com o botão direito e depois copiar(ou copy)... Pronto depois você abre a sua página e vai colando os códigos...
No meu caso os códigos copiados foram estes...

<div class="seta_novidade"><a href="javascript:next_slide(-1);void(0);"><b class="c0 esquerda">&nbsp;</b></a></div>

<div id="news">

<a id="imagem" href="#4">

<div>

<img id="imagem_inferior" src="./novidades/novos_valores.jpg">

<img id="imagem_superior" style="opacity: 0;" src="./novidades/fale_comigo.jpg">

</div>

</a>

<div id="novidades">

<div style="height: 115px;">

<a id="n3" href="javascript:slide_to(document.getElementById('n3'),'#4');void(0);" data="novos_valores.jpg" class="f0">Site novo, preços reformulados, confira!</a><a id="n0" href="javascript:slide_to(document.getElementById('n0'),'#1');void(0);" data="site_novo.jpg" class="">Faça uma avaliação do meu novo site!</a><a id="n1" href="javascript:slide_to(document.getElementById('n1'),'#2');void(0);" data="tirar_medidas.jpg" class="">Confira aqui, métodos para tirar medidas...</a><a id="n2" href="javascript:slide_to(document.getElementById('n2'),'#3');void(0);" data="fale_comigo.jpg" class="">Dúvidas? Converse comigo por uma de minhas redes sociais! ^^</a></div>

</div>

</div>

<div class="seta_novidade"><a href="javascript:next_slide(1);void(0);"><b class="c0 direita">&nbsp;</b></a></div>

Bom agora sabemos o que faz parte da estrutura do sistema de slides... O que devemos fazer agora?
Geralmente o código cru estará longe de ter o visual que você encontrou no site de qual copiou, isso porque visualmente é quase tudo graças aos códigos CSS, vocês lembram que no último post eu ensinei bastante coisa pra vocês né? Agora é hora de vocês procurarem esses códigos...
Vocês tem algumas formas de fazer isso... Vejam as fotos e a explicação de cada modo abaixo...

Os estilos geralmente ficam dentro da tag head, isso é uma recomendação, mas não é uma obrigação...
Os estilos também podem estar apenas linkados ao invés de estarem escritos dentro da tag style... Quando eles estão linkados eles também ficam na tag head, dentro de outra tag, veja um exemplo: <link rel="stylesheet" type="text/css" href="css/thumbs.css"> , caso esse seja o seu caso basta você clicar com o botão direito sobre o link e depois escolher open link in new tab...
Ainda nessa foto eu apliquei um método de facilitar sua vida... Bom se você já sabe a estrutura é só procurar por estilizações feitas nos elementos que estão nela... Pra fazer essa busca você usa CTRL+F, no modo de inspetor abrirá um campo embaixo das tags para que você digite o que busca, nesta print veja que busquei a tag body, apenas pra um efeito didático mesmo... Caso você esteja abrindo o link do css externo(na nova guia), o campo para busca aparecerá no canto superior direito do seu navegador, mas o processo de busca é o mesmo, basta digitar o nome do elemento que você procura... Em nosso caso eu começaria procurando por .seta_novidade ...

Às vezes a página tem mais de um estilo linkado, ou os elementos tem vários estilos por causa de suas várias classes, enfim... Um mesmo elemento pode ter sido configurado com fundo vermelho numa estilização, mas na outa estilização foi configurado fundo preto e a primeira foi ignorada...
Pra ver exatamente os estilos CSS que foram aplicados ao elemento selecionado, você pode usar o inspetor... Selecione o elemento no código html, depois olha no canto inferior direito, no meu eu coloquei azul pra destacar, mas pra você estará branco o fundo... Ali você encontrará estilos igual quando você cria uma tag style mesmo... Lembrando que o inspetor também exibe estilizações padrão do navegador, no caso ao lado da identificação da estilização vem escrito user agent stylesheet ...

Bom, aí você vai criar uma tag style dentro da tag head, na página onde você está colocando seu slide... E vai colocando todos os códigos que você achou e que modificam os elementos da estrutura de slides... No meu caso o código encontrado foi:

.seta_novidade{
display:inline-block;
vertical-align:top;
height:300px;
}

/* a referência "elemento":before faz com que um elemento seja criado e inserido antes de qualquer outra coisa dentro do "elemento", é importante definir o modo de exibição(display) deste novo elemento e o seu conteúdo(content) */

.seta_novidade:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.seta_novidade b{
display:inline-block;
vertical-align:middle;
width:33px;
height:33px;
background-image:url(assets/seta_novidades.png);
background-repeat:no-repeat;
background-position:center center;
border-radius:100%; /* arredonda as bordas da div, você pode usar pixels como referência, mas como eue quero um círculo, prefiro colocar em porcentagem */
border: 3px solid #FFF;
box-shadow: 1px 1px 7px 0px #000;
}
.seta_novidade b.esquerda{
/* ao invés de ser usado duas imagens, uma pra cada seta, foi usada apenas uma imagem, a seta da direita é girada 180 graus para se tornar a seta da esquerda, a sombra também é invertida, pois não dá pra girar apenas o background, tem que girar o elemento(bolinha) toda... */
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
box-shadow: -1px -1px 7px 0px #000;
}


#news{
display:inline-block;
margin: 0 4px 0 5px;
}

#imagem, #imagem img{
display:block;
width:451px;
height:300px;
}
#imagem{
overflow:hidden;
}

/* a referência #imagem>div faz com que apenas as divs que são filhas de  #imagem sejam afetadas pelo estilo, caso não houvesse o sinal de > as divs dentro de div também seriam afetadas ou seja #imagem>div>div também seria afetada pelo estilo*/

#imagem>div{
max-width: none;
width: 902px;
height: 300px;
}
#imagem img{
float:left;
background:#000;
}
#imagem_superior{
margin-left:-451px;
z-index:2;
}

/* a referência "elemento">* faz com que todos elementos que são filhos de determinado elemento sejam afetados pelo estilo é interessante usar *(asterisco) quando não sabemos definir exatamente as tags que serão afetadas, sabemos apenas que todas as tags serão afetadas */

#novidades>div>*{
display:block;
text-align:left;
font:16px/28px Arial;
border-bottom:1px dashed #868686;
}
#novidades>div{
overflow:hidden;
}

/* a referência "elemento":not() faz com que o estilo seja aplicado a todos elementos que não sejam o que for colocado dentro de not, portanto not torna-se uma condicional para que determinado efeito seja aplicado... No caso abaixo o primeiro efeito será aplicado em todos elementos de #novidades>div>* exceto ao primeiro elemento(:first-child)... No segundo caso o estilo só será aplicado ao último elemento, por isso :last-child, para saber mais sobre :not()  first e last child, procure no google que você encontrará exemplos  */

#novidades>div>*:not(:first-child){
color:#8B8B8B;
}
#novidades>div>*:last-child{
border-bottom:none;
}

Neste momento, apesar no slide não estar funcionando, a aparência deve estar próxima... Caso não esteja provavelmente você se esqueceu de copiar alguma parte do código... Reveja e tente encontrar os erros...
Interaja com o site com o modo de inspetor aberto, veja se o código se altera quando você mexe no site e caso se altere tente ver como ocorre essas alterações, se for uma alteração que cria um atributo style no elemento é porque provavelmente esse estilo está sendo aplicado por javascript ao invés de css... Neste caso você já pode partir para a terceira parte da cópia, o código Javascript...

Bom, esqueçam do CSS agora, voltem e vejam o código html que copiamos... Vejam que a maioria dos links(pra quem não lembra os links são as tags a e ficam dentro do atributo href), não são normais... Eles iniciam com javascript: e terminam com void(0); isso significa que será executado um código em javascript quando clicarmos nesses links, o void(0) faz com que o visitante permaneça na página após executar o código, se não colocamos isso a barra de rolagem pode rolar pro topo do site ou o site pode sumir, entre outros problemas...

Abaixo(em vermelho), explicarei outras formas de se executar javascript quando clicamos em links, se o que você pretende copiar não tem o código como o de cima, você precisará ver o meu texto em vermelho pra entender onde ele pode estar e tentar achá-lo...rs

Outra forma de configurar os links pra executarem javascript ao serem clicados é colocar o comando no atributo onclick, tipo, <a href="#" onclick="slide_to(...);"> . Veja que quando você coloca o comando no atributo onclick você não precisa colocar javascript: , isso porque no atributo onclick só pode ser um comando em javascript... 

Qual a vantagem de colocar no href? Bom eu acho vantajoso fazer isso porque o atributo onclick não é bem interpretado em todos dispositivos móveis ou seja, seu site pode acabar não funcionando em algum celular ou tablet... A desvantagem de usá-lo é que as pessoas poderão vê-lo ao passar o mouse em cima do link e ficar com medo de clicar por não ser um link "amigável"...

Também tem um outro jeito de se colocar um link com comando javascript, esse método é conhecido como jquery, nele você configura os links antes da página ser carregada, usa como referência id's, tags, e classes, como os estilos css, ele tem mais compatibilidade com diversos navegadores, mesmo assim ainda não é 100% garantido... A vantagem é que usando ele você pode ter um código mais organizado...

Bom, como aqui o exemplo é fácil logo percebemos que o comando das setas é next_slide(n), no lugar de N pode ser numero 1 para ir pro próximo slide ou número -1( 1 negativo) para ir pro slide anterior...
Aqui vocês são apresentados às funções de javascript... As funções são definidas da seguinte maneira:
function nome_da_função(parâmetros){ processos }
E quando uma função é usada durante o código ela é chamada assim: nome_da_função(parâmetros)
Bom, mas pra que serve uma função? Elas servem para executar processos que são executados várias vezes, neste caso, o processo é o de mudar o slide, pensou? Pois é, não adianta mudar o slide só uma vez, ou duas, ele terá que mudar sempre... Portanto é preciso ter uma função para fazer isso... Outro motivo de se usar uma função é limpar o código, ou seja, ao invés de chamar a função dentro do link é claro que a gente poderia escrever o que há dentro da função nesse link, mas isso tornaria o código muito extenso e você poderia repetir o mesmo código diversas vezes na página, deixando ela grande desnecessariamente, então as funções também servem pra economizar espaço...

Sabendo que a função next_slide está sendo chamada nas setas, a gente vai procurar em tags script por essa função...

O código javascript é parecido com o código css em questões de poder ser escrito direto na página ou poder ser linkado... Quando é escrito direto na página você busca a função pelo inspetor se for linkado estará na tag head, caso não esteja estará no começo ou no final da tag body, ele também pode estar logo depois do sistema de slides neste caso... A linkagem do código javascript é feita pela própria tag, a diferença é que há o atributo src, por exemplo: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Pois bem, daí você encontrou nesse código a função next_slide... Dentro dela vão haver várias linhas, cada linha é um comando, e no final da execução desses comandos o slide terá mudado... Aí você terá que olhar as linhas deste código encontrado e ver como ele funciona, se ele chama por outras funções, enfim...
Exemplo:

function next_slide(n){
if(n>0){
muda_novidade(1);
}else{
muda_novidade(document.getElementById('novidades').getElementsByTagName('a').length-1);
}
}

Veja que a função slide tem um parâmetro, ou seja, quando for executada você terá que enviar esse parâmetro entre os parenteses, no caso esse parâmetro servirá para saber se o slide avança ou retrocede... Na segunda linha do código você vê a condicional IF(se), lendo a condicional temos o seguinte: Se N for mair do que 0 , isso irá executar muda_novidade(1), caso contráro(else), irá executar aquele outro código que também é com a função muda_novidade()... Então veja que ter apenas a função next_slide não permitirá que o seu slide funcione, você tem que ter a função muda_novidade também...
Neste caso você não precisaria entender essa parte que grifei de amarelo, roxo e azul, mas vou explicar, pois haverão casos que você precisará conhecer alguns códigos pra conseguir entender o que tá acontecendo, portanto, quanto mais você souber, menos perdido você ficará...

1. A primeira parte(em amarelo), está capturando o elemento com a id novidades;
2. A segunda parte(em roxo), está capturando todas as tags a que há dentro do elemento capturado anteriormente;
3. A terceira parte(em azul), conta quantos elementos foram encontrados anteriormente(pois foi buscado todos os elementos com a tag a);
4. A quarta parte(que não tá marcada), deduz 1 do total encontrado, isso porque em programação os elementos começam a ser classificados por 0, ou seja, se houverem 3 tags a, a terceira será indexada como 2, a 2 como 1 e a 1 como 0...(3=2 , 2=1 , 1=0)

Na definição da funçao muda_novidade acabei encontrando o seguinte código...

function muda_novidade(n){

eval(document.getElementById('novidades').getElementsByTagName('a')[n].getAttribute('href').replace('javascript:','').replace(';void(0);',''));

}

Vamos a explicação do que essa função vai fazer...

1. A primeira coisa a observar é que há a necessidade do parâmetro n pra executar essa função;
2. O parâmetro n foi definido na função anterior, você se lembra? Ela verificava se o slide avançava ou voltava, caso avançasse das tags a o próximo slide seria a 1(que na verdade é 2), caso retrocedesse seria contado quantas tags a têm e decrescido 1 para chegar ao número de indexação dela(que é agora é representado por n)...
3. O comando eval serve para executar uma string, como se fosse um código javascript, daqui à pouco você vai entender porque disso...
4. Você lembra que a parte preta e rosa do código foi explicada anteriormente? Pois é, a primeira pega o elemento com id novidades e a segunda pega todos os elementos com tag a, a diferença é que agora, depois de pegar todos os elementos, capturamos apenas um, através dos colchetes [n], ou seja, acabamos de selecionar entre nossos links, o link que será a próxima slide...
5. A parte em vermelho serve para pegar o conteúdo do atribulo href... Vamos pegar o exemplo que postei, as duas primeiras tags são <a id="n3" href="javascript:slide_to(document.getElementById('n3'),'#4');void(0);" data="novos_valores.jpg" class="f0">Site novo, preços reformulados, confira!</a><a id="n0" href="javascript:slide_to(document.getElementById('n0'),'#1');void(0);" data="site_novo.jpg" class="">Faça uma avaliação do meu novo site!</a> suponde que n seja 1, vamos pegar o conteúdo de href da tag grifada em roxo... javascript:slide_to(document.getElementById('n0'),'#1');void(0);
6. Espero que vocês ainda se lembrem que só há necessidade de colocar javascript: no começo e void(0); no final, quando executamos javascript pelo atributo href, o que está grifado em azul e amarelo lá, nada mais são do que códigos para trocar palavras(replace), a primeira parte(azul), troca a string(frase) "javascript:" por(representado por vírgula) ''(nada), ou seja apagou essa parte... A segunda parte(amarela), faz o mesmo, mas dessa vez com o void(0);
7. E assim como na matemática, só depois que o computador resolve os problemas de dentro do parênteses que ele resolve os de fora, ou seja, o eval só será executado depois de pegar o href corrigido do próximo slide... E quando ele for executado será chamada a função slide_to()

Pois é gente, ainda não acabou, ainda tem mais uma função à ser explicada...rs Confesso que estou com um pouco de preguiça já, pois fazer é menos complicado do que explicar e essa é a função mais chatinha do código...rsrs

Bom, acho que essa função eu não preciso explicar linha por linha, vou apenas explicar como ela funciona e deixar o código, pois se vocês quiserem entender o código é só ir procurando pelos comandos no google...rsrs ^^

A função slide_to tem dois parâmetros, o primeiro é uma referência a um elemento da página, este elemento será o próximo slide, se você reparar na tag a, você verá que eu defino uma id para ela e no href eu faço referência a esta id <a id="n0" href="javascript:slide_to(document.getElementById('n0'),'#1');void(0);"... O segundo parâmetro é o link do elemento, sim, pois quando ele for o slide atual poderá ser clicado e redirecionar a pessoa para outra página... Com essa explicação vocês já podem entender o que vai acontecer se a pessoa ao invés de clicar nas setinhas, clicar nas tags a, mudará o slide caso o link clicado não seja o do topo da lista, caso seja abrirá o link que tá no segundo parâmetro do slide_to...

Então no caso, no lugar de #1 na verdade eu colocaria o nome da página pra onde clicar nesse link levaria, por exemplo loja.htm... Como eu ainda não tenho outras páginas para referenciar, estou colocando estas referências com id mesmo...

O primeiro parâmetro é um objeto, ou seja, é um elemento da página do qual posso pegar conteúdo, o segundo parâmetro é apenas uma string, strings tem que ser escritas entre aspas sempre! Se quiser aprender mais sobre o básico de javascript, acesse: http://comofazercerto.blogspot.com.br/2013/01/mais-comandos-uteis-de-javascript.html?q=html

Bom, agora o funcionamento da função, sabendo ela qual é o próximo slide, ela mudará o link atual pelo link encontrado no segundo parâmetro da função, ela pegará a imagem do slide atual, colocará a imagem como imagem superior, pegará a imagem do próximo slide, colocará como inferior, fará com que a imagem superior vá desaparecendo, até que reste apenas a imagem do novo slide, fará com que o rode a parte de texto das novidades, fazendo com que a novidade atual fique no topo... Após chegar ao topo a tag a recebe a classe f0, que é responsável por determinar qual é a novidade que está sendo exibida pelo slide atualmente... Após todo esse processo é iniciado uma contagem de 5 segundos para que aconteça uma mudança automática pro próximo slide... Em resumo é isso que a função faz...rsrs

A ordem dos comandos pode não ser exatamente esta, mas no final das contas o resultado é este, por isso expliquei dessa forma, mas se você quiser entender realmente como eu fiz isso, você pode olhar o código abaixo...

window.in_exec=false;

document.getElementById('novidades').getElementsByTagName('div')[0].style.height=document.getElementById('novidades').getElementsByTagName('div')[0].offsetHeight;

function slide_to(obj,url){

if(window.in_exec){

return false;

}

if(obj.className=='f0'){

location.href=url;

}else{

clearInterval(window.auto_slide);

window.to_del=Array();

novidades=document.getElementById('novidades').getElementsByTagName('a');

for(i=0;i<novidades.length;i++){

if(novidades[i]==obj){

window.novidade_step=Math.round((i*29)/10);

break;

}else{

window.to_del.push(novidades[i].id);

document.getElementById('novidades').getElementsByTagName('div')[0].appendChild(novidades[i].cloneNode(1));

}

}

anterior=document.getElementById('novidades').getElementsByClassName('f0')[0].getAttribute('data');

prox=obj.getAttribute('data');

document.getElementById('imagem_superior').src='./novidades/'+anterior;

document.getElementById('imagem_superior').style.opacity=1;

document.getElementById('imagem_inferior').src='./novidades/'+prox;

document.getElementById('imagem').href=url;

setTimeout(function(){window.auto_slide=setInterval(function(){next_slide(1)},5000);},1000);

window.in_exec=true;

window.novidade_transition=setInterval(function(){

if(document.getElementById('imagem_superior').style.opacity<=0){

document.getElementById('imagem_superior').style.opacity=0;

for(k=0;k<window.to_del.length;k++){

document.getElementById(window.to_del[k]).parentNode.removeChild(document.getElementById(window.to_del[k]));

}

document.getElementById('novidades').getElementsByTagName('div')[0].scrollTop=0;

document.getElementById('novidades').getElementsByClassName('f0')[0].className='';

document.getElementById('novidades').getElementsByTagName('a')[0].className='f0';

window.in_exec=false;

clearInterval(window.novidade_transition);

}else{

document.getElementById('imagem_superior').style.opacity-=0.1;

document.getElementById('novidades').getElementsByTagName('div')[0].scrollTop+=window.novidade_step;

}

},100);

}

}

Bom, não sei se você teve a curiosidade de analisar o código que acabei de postar, se sim, provavelmente você encontrou algumas variáveis que não havíamos falado dela ainda... 

1. window.in_exec = verifica se há uma animação de transição de slide em andamento, para que não se tente mudar o slide enquanto ocorre uma mudança e dê pau no código;
2. window.auto_slide = serve como cronometro pra mudança automática de slide;

Definir variáveis com window. no começo faz com que elas sejam acessíveis por qualquer script da página(incluindo outras funções, enfim) à qualquer momento, caso você não faça isso;

• Definir variáveis normalmente dentro de funções = elas ficarão disponíveis apenas dentro da função atual;
• Definir variáveis normalmente fora das funções = ficarão disponíveis apenas fora das funções.

Bom gente, acho que já chega né?! rs

O post acabou ficando grande demais por causa dos códigos... Não desanimem de ler o post não, pulem as partes dos códigos, leiam mais as explicações... ^^

Caso vocês queiram copiar o meu slide é só vocês copiarem os códigos e colar na ordem...

1. CSS
2. HTML
3. Javascript

Assim que terminar de colocar os elementos html você coloca o script, se você colocar antes ele vai buscar por elementos que não existem e daí não vai funcionar...rsrs

Provavelmente meu post acabou ficando com alguma falha de pensamento, por ter ficado muito grande, então se vocês não entenderem alguma parte, por favor, deixem nos comentários para eu pode arrumar... ^^

Se quiserem ajuda também é só comentar, tentarei ajudar...

Valeu! ^^