xTibia

.com
MA
website

Slider Javascript

Por masdead, 15 de jan. de 2014 em Tutoriais de Websites

otserv
tibia
script
7
1.9k
masdeadM
15 de janeiro de 2014 às 01:17
Bom pra começar eu sempre achei que era uma coisa muito difícil mas nesse tutorial vocês vão ver que é uma coisa bem fácil de se fazer
Primeiro de tudo criem uma estrutura básica de HTML
<html>
<head>
<title>slider</title>
</head>
<body>

</body>
</html>
Vamos começar fazendo a parte de javascript, para criar um script javascript você tem que colocar o código entre
<script type="text/javascript> SCRIPT </script> e essa parte que citei anteriormente deve ficar entre a tag <head> do HTML 

<html>
<head>
<title>slider</title>
<script type="text/javascript">


</script>
</head>
<body>


</body>
</html>
Agora vamos criar uma imagem com um ID <img id="tutorial"> (O conteudo do ID pode ser qualquer um eu coloque tutorial porque não tenho muita criatividade) esse código deve ficar entre a tag body do HTML 

<html>
<head>
<title>slider</title>
<script type="text/javascript">


</script>
</head>
<body>
<img id="tutorial">
</body>
</html>
Feito isso vamos começar com o a parte mais interessante o Javascript vamos começar criando uma função (ela deve ficar entre <script type="text/javascript>SCRIPT </script> como disse acima) para criar é fácil só digitar function nomedafunção() (esses parenteses são para definir paremetros não sei direito ainda não programo tão bem, mas nesse tutorial ele não vai conter nada) 

<html>
<head>
<title>slider</title>
<script type="text/javascript">
function slide1() {


}
</script>
</head>
<body>
<img id="tutorial">
</body>
</html>
Fazendo isso nós precisamos recuperar a id em que o javascript será aplicado nós fazemos isso com
document.getElementById('idqueseraaplicadoojavascript') se lembram da id em que colocamos na imagem? Então nós vamos usar ela agora 

<html>
<head>
<title>slider</title>
<script type="text/javascript">
function slide1() {
document.getElementById('tutorial')
}
</script>
</head>
<body>
<img id="tutorial">
</body>
</html>
Bom como precisamos alterar a imagem a cada slide nós temos que editar o src então só adicionamos um .scr="localização da img que vai ficar como o primeiro slide"; 

<html>
<head>
<title>slider</title>
<script type="text/javascript">
function slide1() {
document.getElementById('tutorial').src="1.png";
}
</script>
</head>
<body>
<img id="tutorial">
</body>
</html>
Feito isso é só adicionar mais slider é só copiar o script e colar, mas lembre-se temos que mudar o nome da função nos outros slides como eu vou fazer com só três slides eu vou copiar e colar mais duas vezes e mudar as funções dos dois últimos slides (slide2() e slide3()) e alterar as imagens que vai mostrar em cada slide.

<html>
<head>
<title>slider</title>
<script type="text/javascript">
function slide1() {
document.getElementById('tutorial').src="1.png";
}
function slide2() {
document.getElementById('tutorial').src="1.png";
}
function slide3() {
document.getElementById('tutorial').src="1.png";
}
</script>
</head>
<body>
<img id="tutorial">
</body>
</html>
Pronto como podem ver não é difícil a parte javascript mas ainda tem algumas coisinhas para fazer o slider funcionar.
Para mostrar o slider quando a página carregar precisamos colocar um evento javascript dentro da tag <body> no HTML esse evento é o onLoad="nome da função javascript para carregar"

<html>
<head>
<title>slider</title>
<script type="text/javascript">
function slide1() {
document.getElementById('tutorial').src="1.png";
}
function slide2() {
document.getElementById('tutorial').src="1.png";
}
function slide3() {
document.getElementById('tutorial').src="1.png";
}
</script>
</head>
<body onLoad="slide1()">
<img id="tutorial">
</body>
</html>
Agora para mudar de slides nós vamos fazer uma lista com pontos e quando o usuário clicar um um dos pontos o slide muda.
Para fazer isso é só criar uma lista entre a tag <body> e o fechamento dela, e para fazer uma lista usamos a tag HTML <li></li>

<html>
<head>
<title>slider</title>
<script type="text/javascript">
function slide1() {
document.getElementById('tutorial').src="1.png";
}
function slide2() {
document.getElementById('tutorial').src="1.png";
}
function slide3() {
document.getElementById('tutorial').src="1.png";
}
</script>
</head>
<body onLoad="slide1()">
<img id="tutorial">
<li>♣</li>
<li>♣</li>
<li>♣</li>
</body>
</html>
Mas ainda não terminou para mudar de slides nós precisamos colocar um evento en cada <li> esse evento javascript é o onClick="". É mais ou menos assim quando o usuário clicar em um dos símbolos o slide muda e dentro desse onClick="" vamos colocar a função de cada slide ficando assim

<html>
<head>
<title>slider</title>
<script type="text/javascript">
function slide1() {
document.getElementById('tutorial').src="1.png";
}
function slide2() {
document.getElementById('tutorial').src="1.png";
}
function slide3() {
document.getElementById('tutorial').src="1.png";
}
</script>
</head>
<body onLoad="slide1()">
<img id="tutorial">
<li onClick="slide1()">♣</li>
<li onClick="slide2()">♣</li>
<li onClick="slide3()">♣</li>
</body>
</html>
No final o nosso slider e os bang pra mudar de slider fica assim (Está feio ainda tem que aplicar o CSS para ficar bonitinho '-' mas isso é com vocês)
07qSqv.png
KuEvDq.png
7frClT.png
Bom o tutorial é isso como podem ver é uma coisa fácil, agora é só aplicar o CSS como vocês quiserem
O slider é simples pois eu não sei programar muito ainda mas já da pra usar :)
Espero que tenham gostado se tiverem dicas para implementar o tutorial só falarem e se tiver dúvida é só perguntar também
Se tiver erros de português me desculpem também.
Download do Slider
Senha para extrair: xtibia
vinnevinneV
15 de janeiro de 2014 às 01:36

Parabens! eu curto muito o html codigos e javascript esta otimo rep+

Helton MunizH
15 de janeiro de 2014 às 18:02

Gostei, Por Mim Aprovado Leve Meu Curtir.

GpedroG
15 de janeiro de 2014 às 20:20

Seu modo de ensinar ficou um pouco extenso desnecessáriamente. Algumas partes daria para juntar tudo em uma e explicar de uma só vez.

 

Apenas algumas correções a serem feitas (em minha opinião):

* Está faltando colocar o highlight correto nos códigos.

<!DOCTYPE>
<html>
  <head>
    <title>Meu HTML</title>
    <meta charset="UTF-8">
  </head>

  <body>
    <p>Meu Primeiro HTML</p>
  </body>
</html>

* Senti falta da indentação, o que deixa o código mais visívelmente organizado.

 

---

 

De qualquer forma, o resultado final é satisfatório e eficaz. Parabéns.

 

---

Kind Regards,

Gabriel Pedro.

masdeadM
15 de janeiro de 2014 às 20:27

Seu modo de ensinar ficou um pouco extenso desnecessáriamente. Algumas partes daria para juntar tudo em uma e explicar de uma só vez.

 

Apenas algumas correções a serem feitas (em minha opinião):

* Está faltando colocar o highlight correto nos códigos.

<!DOCTYPE>
<html>
  <head>
    <title>Meu HTML</title>
    <meta charset="UTF-8">
  </head>

  <body>
    <p>Meu Primeiro HTML</p>
  </body>
</html>

* Senti falta da indentação, o que deixa o código mais visívelmente organizado.

 

---

 

De qualquer forma, o resultado final é satisfatório e eficaz. Parabéns.

 

---

Kind Regards,

Gabriel Pedro.

Eu tinha identado no notepad++ mas quando colei aqui o editor do xtibia tirou a indentação

Eu tentei explicar do meu jeito e o código eu faço sites assim e sempre da certo mas nos próximos vou tentar explicar melhor

 

Obrigado pelos comentários

GpedroG
15 de janeiro de 2014 às 20:44

Utilize espaços para indentar no editor daqui do forum. Utilizei dois espaços e ficou bonitinho.

2 semanas depois...
AlexclusiveA
29 de janeiro de 2014 às 03:34

Que bom ti ver nessa área Thiago!! Ótimo tutorial, aprovado e movido!