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