Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 35
Tutorial para Criar uma Galeria de Imagens Simples

Neste tutorial veremos como criar uma galeria de imagens simples com apenas seis imagens, mas você poderá adicionar mais fotos se desejar.
Vejamos então um exemplo:
Exemplo: Nesse exemplo vamos utilizar apenas seis imagens com as dimensoes de 600 x 300 (largura x altura) e os arquivos a seguir. Você deve colocar as imagens em um diretório separado chamado: imagens:
Arquivo index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Galeria de Imagens em JavaScript</title> <script src='/google_analytics_auto.js'></script></head> <body> <h1>Galeria de Imagens em JavaScript</h1> <div id="canvas"> <div class="arrow" ><img id="left" src="./images/left-arrow.png" class="image"></div> <div class="arrow" ><img id="right" src="./images/right-arrow.png" class="image"></div> </div> <script src="app.js"></script> </body> </html>
Arquivo style.css:
h1{ text-align: center; } #canvas { position: relative; height: 300px; width: 600px; border: 2px solid black; margin: auto; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; } .arrow{ position: relative; z-index: 1; width: 30px; height: 30px; padding: 5px; box-sizing: border-box; background: red; opacity: .8; } .image{ width: 20px; height: 20px; } .arrow:hover{ background-color: white; } footer{ margin-top: 50px; text-align: center; }
Arquivo app.js:
// create an array of image sources; let images = [ 'image1.png', 'image2.png', 'image3.png','image4.png','image5.png','image6.png'] let i = 0; // Adiciona a imagem inicial na tela. let canvas = document.getElementById('canvas'); canvas.style.background = `url(./images/${images[0]})` // Adiciona os eventos para as setas de controle. let arrows = document.querySelectorAll('.arrow'); arrows.forEach(function(arrow){ arrow.addEventListener('click', function(e){ if (e.target.id === "left"){ //check to see if at beginning of array i--; if (i < 0){ i = images.length -1; } canvas.style.background = `url(./images/${images[i]})`; } else if (e.target.id === "right") { i++; if (i >= images.length ){ i = 0; } canvas.style.background = `url(./images/${images[i]})`; } }) });
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar um Relógio Analógico - 2
Tutorial para Criar um Formulário para Criaçao de uma Conta >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino