servir vários banners com um script
Olá pessoal. BannerA está funcionando normalmente. Como usar mesmo script para bannerB e bannerC.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Aleatório</title>
<style>
/* Estilos opcionais para o banner */
#divPai {
margin: auto;
border: 2px solid red;
}
#bannerA {
width: 240px;
height: 480px;
overflow: hidden;
position: relative;
}#bannerA img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
transition: 1.5s ease-in;
}#bannerA img.active {
opacity: 1;
}
</style>
</head>
<body>
<div id="divPai">
<div id="bannerA" class="bannerA">
<a href="link1"><img src="image1.jpg" alt="Imagem 1"></a>
<a href="link2"><img src="image2.jpg" alt="Imagem 2"></a>
<a href="link3"><img src="image3.jpg" alt="Imagem 3"></a>
</div>
<!-- <hr>
<div id="bannerB" class="bannerB">
<a href="link4"><img src="image4.jpg" alt="Imagem 4"></a>
<a href="link5"><img src="image5.jpg" alt="Imagem 5"></a>
<a href="link6"><img src="image6.jpg" alt="Imagem 6"></a>
</div>
<hr>
<div id="bannerC" class="bannerC">
<a href="link7"><img src="image7.jpg" alt="Imagem 7"></a>
<a href="link8"><img src="image8.jpg" alt="Imagem 8"></a>
<a href="link9"><img src="image9.jpg" alt="Imagem 9"></a>
</div> -->
</div>
<hr>
<script>
document.addEventListener("DOMContentLoaded", function() {
// var banner = document.getElementById("divPai");
// var images = banner.querySelectorAll("img");
var images = document.querySelectorAll("#bannerA img");
// Função para exibir uma imagem aleatória
function showRandomImage() {
// Escolhe aleatoriamente um índice de imagem
var randomIndex = Math.floor(Math.random() * images.length);
// Define todas as imagens como ocultas
images.forEach(function(img) {
img.style.display = "none";
});
// Exibe a imagem aleatória
images[randomIndex].style.display = "block";
}
// Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos
showRandomImage();
setInterval(showRandomImage, 1000);
// makeSliderKind('.bannerA', 1000);
// makeSliderKind('.bannerB', 2000);
// makeSliderKind('.bannerC', 3000);
});
</script>
</body>
</html>Discussão (1)
Carregando comentários...