-
Notifications
You must be signed in to change notification settings - Fork 0
/
image-slider(array-html-array_externo).html
114 lines (102 loc) · 4.51 KB
/
image-slider(array-html-array_externo).html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' href='css/style.css' type='text/css' />
<title>JS tutorial practicing</title>
</head>
<body>
<h1>Image Slider</h1>
<section>
<b>Com Array - Buscando imagens em pasta</b>
<br />Simples slider de imagens, usando array para cada url de imagem, botões voltar e próximo (sem animação).
<br /><br />
<div id="imgslider">
<button onclick="voltar()"> Prev </button>
<img id="slider" src="image/img01.jpg" />
<button onclick="proximo()"> Next </button>
</div>
<br />
<br />Cria objeto com arrays; cria variável recebe valor 0;
<br />Cria função para botão próximo; cria variável para tag img; Escreve variável de valor recebendo ++;
<br />Cria um "if" e dentro verifica a variável do valor com o objeto length;
<br />Resposta do "if" vai para a variável do valor;
<br />Fora do "if" responde com a variável da tag img mais o "src" que recebe objeto com dentro de array a variável recebe valor;
<br />Cria função para botão voltar; seguir mesmos passos do botão acima mas com calculo lógico diferente. Obs
a variável de valor recebendo --;
<script>
var imagens = [
"image/img01.jpg",
"image/img02.jpg",
"image/img03.jpg"
];
var valor = 0;
function proximo() {
var tagimg = document.getElementById("slider");
valor++;
if (valor >= imagens.length) {
valor = 0;
}
tagimg.src = imagens[valor];
};
function voltar() {
var tagimg = document.getElementById("slider");
valor--;
if (valor < 0) {
valor = imagens.length - 1;
}
tagimg.src = imagens[valor];
};
</script>
</section>
<section>
<!-- EXPLICAÇÃO: https://www.w3schools.com/w3css/w3css_slideshow.asp -->
<b>Criar slider com todas imagens no html </b>
<br /><br />
<div class="display-container">
<img class="mySlides" src="image/img01.jpg">
<img class="mySlides" src="image/img02.jpg">
<img class="mySlides" src="image/img03.jpg">
<button onclick="btn(-1)">❮</button>
<button onclick="btn(1)"> ❯</button>
</div>
<br />
<br />cria variável com nome array que recebe 1;
<br />cria uma nome que pega entre parenteses o nome da 1º variável criada;
<br />cria função para botão e dá um nomeX entre parenteses, dentro dessa função adiciona o nome que pegou a 1º
variável criada, entre parenteses escreva a 1º variável, escreva operador "+=" e o nome que deu na função do
botão;
<br />cria função (geral), com o nome que pegou a 1º variável criada e entre parenteses da um nome (para
numeros de imagens que terá no html);
<br />cria variável que receberá as tags img;
<br />No Botão Passar: cria um if com os nomes entre parenteses: nome dado a função geral e nome da variável
das
img com length, a resposta mexe com a 1º variável;
<br />No Botão Voltar: cria um outro if com o botão passar mas com ações contraria (pensar na solução para dar
resposta a 1º variável);
<br />Cria um loop pegando a variável das tags img mais length e insere nele um estilo para sumir;
<br />Fora do loop, na variável das tags img e array insere -1 e um estilo para aparecer;
<script>
var array = 1;
variaveis(array);
function btn(click) {
variaveis(array += click);
};
function variaveis(valorImg) {
var imgs = document.getElementsByClassName("mySlides");
if (valorImg > imgs.length) {
array = 1;
}
if (valorImg < 1) {
array = imgs.length;
}
for (i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}
imgs[array - 1].style.display = "block";
}
</script>
</section>
</body>
</html>