Untitled


SUBMITTED BY: WesleySantista

DATE: Aug. 23, 2024, 5:45 p.m.

UPDATED: Aug. 23, 2024, 6:14 p.m.

FORMAT: Text only

SIZE: 2.0 kB

HITS: 53

  1. <!DOCTYPE html>
  2. <html lang="pt-BR">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Slide de Imagens</title>
  7. <style>
  8. * {box-sizing: border-box;}
  9. body {font-family: Arial, sans-serif;}
  10. .slideshow-container {
  11. position: relative;
  12. max-width: 100%;
  13. margin: auto;
  14. }
  15. .mySlides {
  16. display: none;
  17. }
  18. img {
  19. vertical-align: middle;
  20. width: 100%;
  21. height: auto;
  22. }
  23. .fade {
  24. animation-name: fade;
  25. animation-duration: 2s;
  26. }
  27. @keyframes fade {
  28. from {opacity: .4}
  29. to {opacity: 1}
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="slideshow-container">
  35. <a href="https://godpromo.shop">
  36. <div class="mySlides fade">
  37. <img src="https://i.imgur.com/Nr7YDO8.png" alt="Imagem 1">
  38. </div>
  39. <div class="mySlides fade">
  40. <img src="https://i.imgur.com/90Z7kqR.png" alt="Imagem 2">
  41. </div>
  42. <div class="mySlides fade">
  43. <img src="https://i.imgur.com/HAnjoSE.png" alt="Imagem 3">
  44. </div>
  45. <div class="mySlides fade">
  46. <img src="https://i.imgur.com/DD6ocO2.png" alt="Imagem 4">
  47. </div>
  48. <div class="mySlides fade">
  49. <img src="imagem5.jpg" alt="Imagem 5">
  50. </div>
  51. </a>
  52. </div>
  53. <script>
  54. let slideIndex = 0;
  55. showSlides();
  56. function showSlides() {
  57. let i;
  58. let slides = document.getElementsByClassName("mySlides");
  59. for (i = 0; i < slides.length; i++) {
  60. slides[i].style.display = "none";
  61. }
  62. slideIndex++;
  63. if (slideIndex > slides.length) {slideIndex = 1}
  64. slides[slideIndex-1].style.display = "block";
  65. setTimeout(showSlides, 5000); // Muda a imagem a cada 5 segundos
  66. }
  67. </script>
  68. </body>
  69. </html>

comments powered by Disqus