Código do projeto!
<!DOCTYPE html><html><center><head> <title>Versos e Slideshow Automáticos</title> <style> /* Estilos para o slideshow */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; }
.mySlides { display: none; }
/* Estilos para os versos */ #verso { font-size: 24px; text-align: center; margin-top: 20px; } </style></head><body>
<h1 style:#8A2BE2;>Versos Slideshow e imagens!</h1>
<!-- Div para exibir o verso --><div id="verso"></div>
<!-- Div para exibir o slideshow --><div class="slideshow-container"> <div class="mySlides"> <img src="https://i.pinimg.com/originals/b5/d8/25/b5d825f5190f11fc4d3e95ba39aebb53.gif" style="width:100%"> </div> <div class="mySlides"> <img src="https://i.pinimg.com/originals/26/13/dc/2613dcc4d6db323bb3faf967be141006.gif" style="width:100%"> </div>
<div class="mySlides"> <img src="https://i.pinimg.com/originals/74/b7/38/74b73858b530613b844b4cc0164ce58d.gif" style="width:100%"> </div></div>
<script>// Array com os versosvar versos = [ "Que em luz chegue. Este brilhar, momento contemplar. Apenas amar.", "No dizer sim ou não. Visto de amor, a verdade de Jesus em louvor.", "Fé! Acreditar. Que luz, estranho iluminar! É hora de amar.", // Adicione quantos versos desejar];
// Índice do verso atualvar indiceVerso = 0;
// Função para exibir o próximo versofunction proximoVerso() { document.getElementById("verso").innerHTML = versos[indiceVerso]; indiceVerso = (indiceVerso + 1) % versos.length; // Volta ao primeiro verso quando atinge o final}
// Função para alternar entre as imagens do slideshowvar slideIndex = 0;function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 2000); // Muda a imagem a cada 2 segundos (2000 milissegundos)}
// Inicia o slideshow e o primeiro versoshowSlides();proximoVerso();</script>
</body></center></html>