Ir para conteúdo

Slider Javascript

masdead

Por masdead
em Tutoriais de Websites

 Share

Posts Recomendados

masdead

masdead 372

Postado
Postado
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
Link para o comentário
Compartilhar em outros sites
Gpedro

Gpedro 11

Postado
Postado

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.

Link para o comentário
Compartilhar em outros sites
masdead

masdead 372

Postado
  • Autor
Postado

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

Link para o comentário
Compartilhar em outros sites
  • 2 weeks later...
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...