-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
73 lines (61 loc) · 2.27 KB
/
index.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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carrossel de Tabelas com Vários Index</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh; /* Altura total da janela */
overflow: hidden; /* Evita barras de rolagem */
}
.carousel-wrapper {
width: 100%; /* Largura total */
height: 100%; /* Altura total */
position: relative;
overflow: hidden;
border: none; /* Remover borda */
border-radius: 0; /* Remover borda arredondada */
box-shadow: none; /* Remover sombra */
background-color: #fff;
}
iframe {
width: 100%; /* Largura total */
height: 100%; /* Altura total */
border: none;
opacity: 0;
transition: opacity 1s ease-in-out;
}
iframe.visible {
opacity: 1;
}
</style>
</head>
<body>
<div class="carousel-wrapper">
<!-- Iframe que vai carregar os diferentes arquivos index.html -->
<iframe id="iframe" src="htmls/test.html" class="visible"></iframe>
</div>
<script>
const iframe = document.getElementById("iframe");
const pages = ["htmls/filmin.html", "htmls/paises.html"]; // Listagem dos arquivos
let currentPage = 0;
function loadNextPage() {
// Remove a classe 'visible' para a transição
iframe.classList.remove('visible');
// Aguarda a transição de saída antes de carregar a nova página
setTimeout(() => {
currentPage = (currentPage + 1) % pages.length; // Calcula o próximo index
iframe.src = pages[currentPage]; // Carrega a próxima página
// Após carregar a nova página, re-aplica a classe 'visible' para a transição de entrada
iframe.onload = () => iframe.classList.add('visible');
}, 1000); // Tempo para a transição de saída (1 segundo)
}
// Troca a cada 5 segundos
setInterval(loadNextPage, 5000);
</script>
</body>
</html>