A ideia aqui n\u00e3o \u00e9 dizer que voc\u00ea n\u00e3o deva utilizar jQuery, mas que voc\u00ea possa conhecer e explorar recursos do Javascript.<\/p>\n
Portanto, divirta-se\u00a0descobrindo esses\u00a0recursos incr\u00edveis \ud83d\ude42<\/p>\n
Ent\u00e3o vamos l\u00e1.<\/p>\n
Primeiro, vou mostrar a estrutura das pastas e arquivos:<\/p>\n
![\"Slideshow](\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/05\/pasta-slide.jpg\" "\\"Slideshow")
<\/p>\n
Teremos os seguintes arquivos:<\/p>\n
- \n
- index.html<\/strong>, que ter\u00e1 nossa marca\u00e7\u00e3o e que chamar\u00e1 os arquivos css e javascript.<\/li>\n
- css\/style.css<\/strong>, que\u00a0ir\u00e1 conter nosso\u00a0estilo.<\/li>\n
- js\/slider.js<\/strong>, que\u00a0criar\u00e1 o efeito de altern\u00e2ncia de imagens.<\/li>\n<\/ul>\n
E a pasta images, que ter\u00e3o nossas imagens, claro!<\/p>\n
Como dito, no arquivo index.html<\/em> teremos nossa marca\u00e7\u00e3o;\u00a0o\u00a0c\u00f3digo est\u00e1 comentado pra uma melhor compreens\u00e3o.<\/p>\n
Trabalhando o JavaScript<\/h2>\n
<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n<head>\r\n\t<meta charset=\"UTF-8\">\r\n\t<title>Slide Show<\/title>\r\n\t<!--Chama o arquivo style.css -->\r\n\t<link rel=\"stylesheet\" href=\"css\/style.css\">\r\n<\/head>\r\n<body>\r\n\t<!-- Define a lista n\u00e3o ordenada com as imagens -->\r\n\t<ul id=\"sliders\">\r\n\t\t<!-- \r\n\t\t\tDefine uma classe no primeiro item, \r\n\t\t\tpara garantir que ser\u00e1 mostrado\r\n\t\t\tao acessar a p\u00e1gina\r\n\t\t-->\r\n\t\t<li class=\"slider-active\"><img src=\"images\/slider-01.jpg\" \/><\/li>\r\n\t\t<li><img src=\"images\/slider-02.jpg\" \/><\/li>\r\n\t\t<li><img src=\"images\/slider-03.jpg\" \/><\/li>\r\n\t<\/ul>\r\n\t\r\n\t<!--Chama o arquivo slider.js-->\r\n\t<script src=\"js\/slider.js\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
Agora iremos para o arquivo style.css<\/em>, que est\u00e1 na pasta css<\/em>. Nele iremos definir\u00a0as dimens\u00f5es,\u00a0ocultar os itens, e posicionar o slide atual.<\/p>\n
O c\u00f3digo est\u00e1 comentado:<\/p>\n
\/**Definiremos as configura\u00e7\u00f5es do Container do slide **\/\r\n#sliders{\r\n\t\/*Remove o bullet*\/\r\n\tlist-style: none; \r\n\t\/* Define que position:relative porque os \r\n\t * elementos filhos usar\u00e3o absolute\r\n\t *\/\r\n\tposition: relative; \r\n\t\/*Define a largura*\/\r\n\twidth: 800px;\r\n\t\/*Define uma altura*\/\r\n\theight:300px;\r\n \/*Centralizar na horizontal*\/\r\n\tmargin:0 auto;\r\n\t\/*Oculta os elementos que ultrapassarem \r\n\t* as dimens\u00f5es definidas\r\n\t*\/\r\n\toverflow: hidden;\r\n}\r\n\/*Configuremos os itens do slide*\/\r\n#slider li{\r\n\t\/*Definimos como posi\u00e7\u00e3o absoluta, seguindo o elemento pai*\/\r\n\tposition: absolute;\r\n\t\/*Define que ficar\u00e1 encostado no topo*\/\r\n\ttop:0;\r\n\t\/*Define que ficar\u00e1 enconstado do lado esquerdo*\/\r\n\tleft:0;\r\n\t\/*Coloca a opacidade zero, pra ocultar*\/\r\n\topacity: 0;\r\n\t\/*Define ordena\u00e7\u00e3o relacionados os elementos*\/\r\n\tz-index: 0;\r\n\t\/*Cria uma transi\u00e7\u00e3o da opacidade com 1 segundo*\/\r\n\t-webkit-transition: opacity 1s;\r\n\t-moz-transition: opacity 1s;\r\n\ttransition: opacity 1s;\r\n}\r\n\r\n\/* Agora defiremos uma classe \r\n * que mostrar o item atual\r\n *\/\r\n#sliders li.slider-active{\r\n\t\/*Ordena que ficar\u00e1 a frente dos itens*\/\r\n\tz-index: 1;\r\n\t\/*Mostra o slide atual*\/\r\n\topacity: 1;\r\n}<\/pre>\nAgora vamos para o\u00a0arquivo\u00a0slider.js.\u00a0N<\/em>ele iremos adicionar e remover, por intervalo de tempo, a classe\u00a0slider-active\u00a0<\/em>e quando o elemento estiver com essa classe, ele ira exibir\u00a0o item e ocultar os outros.<\/p>\n
Vamos ao c\u00f3digo comentado:<\/p>\n
\/*\r\n\tPega todos os elementos li da lista n\u00e3o ordenada\r\n\tretornando um objeto NodeList, \r\n\tde acordo com posicionamento encontrado\r\n\tno documento\r\n\r\n*\/\r\nvar sliders = document.querySelectorAll('#sliders li');\r\n\/*\r\n Define o indice, que ser\u00e1 responsavel \r\n por informar os slider atual\r\n *\/\r\nvar current = 0;\r\n\/*\r\n Retorna o total de itens do slide.\r\n Diminui menos 1, devido o primeiro\r\n item come\u00e7a com zero. \r\n Se temos 2 items, sua posi\u00e7\u00e3o:\r\n 0,1,2\r\n*\/\r\nvar total = sliders.length - 1;\r\n\/*\r\n Executaremos uma fun\u00e7\u00e3o num intervalo de tempo.\r\n E defiremos que executar\u00e1 em 2000 milesegundos\r\n*\/\r\nwindow.setInterval(function(){\r\n\t\/*\r\n\t a variavel index ser\u00e1 respons\u00e1vel pela\r\n\t posi\u00e7\u00e3o do elemento que iremos remover a classe\r\n\t*\/\r\n\tvar index = current ? current - 1 : total;\r\n\t\/*Pega o elemento pra remover a classe*\/\r\n\tsliders[index].className = '';\r\n\t\/*Adiciona a classe no elemento atual*\/\r\n\tsliders[current].className = 'slider-active';\r\n\t\/*Calcular a posi\u00e7\u00e3o do pr\u00f3ximo elemento que ser\u00e1 exibido*\/\r\n\tcurrent = current >= total ? 0 : current+1; \t\r\n}, 2000);<\/pre>\nA l\u00f3gica aplicada\u00a0\u00e9 adicionar uma classe no elemento atual, e remover da anterior que foi exibido. Se\u00a0o elemento a ser exibido for o primeiro, ent\u00e3o ele remove a classe do \u00faltimo elemento e assim\u00a0o ciclo ser\u00e1 recorrente.<\/p>\n
Dica: Quer se especializar em desenvolvimento e aprender Javascript, jQuery, HTML5, CSS3 e muito mais? Conhe\u00e7a nossos cursos online de Desenvolvimento Front-End<\/a>.<\/p>\n
Segue o link com o exemplo do slide funcionando:<\/p>\n
- css\/style.css<\/strong>, que\u00a0ir\u00e1 conter nosso\u00a0estilo.<\/li>\n